To focus on an input field in @playwright/test, use the page.focus()
method with a locator as its argument. After focusing, type into the input field using the locator.type()
method. To blur the input field, simulate pressing the Tab key with page.keyboard.press()
. Finally, check the input field's value using a combination of locators and assertions.
Here's an example:
import { test, expect } from '@playwright/test';
test('focus, type, blur, and verify input value', async ({ page }) => {
// Navigate to your website
await page.goto('https://ray.run');
// Focus on the input field
await page.focus('#my-input');
// Type into the input field
await page.locator('#my-input').type('Hello World!');
// Blur out of the input field by simulating pressing Tab
await page.keyboard.press('Tab');
// Check if the input field has the expected value
const myInputValue = await page.locator('#my-input').getAttribute('value');
expect(myInputValue).toBe('Hello World!');
});
In this example, we first navigate to the website, focus on the input field with the #my-input
selector, type 'Hello World!' into it, and then blur out of it by simulating a Tab key press. Finally, we check if the input field's value matches the expected value using Playwright's built-in assertion methods.
By following these steps, you can easily focus, type, blur, and verify an input field's value using @playwright/test.
If you still have questions, please ask a question and I will try to answer it.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email [email protected].