This tutorial will show you how to focus on an element using Playwright during automated browser testing. Learn how to programmatically bring elements into focus with practical examples and best practices.
Focusing on an element is a crucial interaction in Playwright automation testing. When you focus on an element, you can trigger events such as form validation, keyboard navigation, or dynamic behaviors, like expanding a search bar. This helps uncover hidden usability issues and ensures your application behaves as expected.
In short, focusing on elements is essential for testing form inputs, modals, and keyboard-driven interfaces effectively.
You can use the focus() method in Playwright to set focus on an input, button, or any focusable element.
Set focus on an element using the focus() method in Playwright
focus() method in Playwright will set focus on the matching element.
Let us see how to set focus on an element in playwright using focus() method with example.
Example to set focus on an element using the focus() method
const { test, expect } = require('@playwright/test');
test('Example: Focus on an element using focus() method in playwright.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2015/03/chart.html');
//Set focus on textbox.
await page.locator('#tooltip-1').focus();
//Verify tooltip displaying when set focus.
await expect(page.getByText('Enter You name')).toBeVisible();
});
Code Breakdown
await page.locator('#tooltip-1').focus();- This line will locate the element by id=”tooltip-1″ and set focus on it using the focus() method.
await expect(page.getByText('Enter You name')).toBeVisible();- This line will assert that the text “Enter You name” is visible on the page.
Verifying Focus State
Once the focus is set on an element, it’s important to verify whether the element is focused. This ensures your test logic is functioning correctly. You can confirm focus by checking the element’s CSS or DOM state using JavaScript. For example, you can compare the element with document.activeElement to validate that focus was successfully applied, as shown in the example below.
Example to verify element focus state using JavaScript in Playwright
const { test, expect } = require('@playwright/test');
test('Example: Verify focus using javascript in playwright.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2015/03/chart.html');
//Locate element
const input = page.locator('#tooltip-1');
//Set focus on textbox.
await input.focus();
//Verify focus state using javascript.
expect(await input.evaluate(el => el === document.activeElement)).toBeTruthy();
});
Code Breakdown
const input = page.locator('#tooltip-1');- This line will locate the element by id tooltip-1
await input.focus();- Focus() method will set focus on the located textbox element.
expect(await input.evaluate(el => el === document.activeElement)).toBeTruthy();- It will assert whether focus is set on the element or not.
Assert element focused using toBeFocused()
If you want to assert whether an element is focused after using the focus() method, you can use Playwright’s toBeFocused() assertion. This provides a clean and reliable way to verify that the element is focused, especially during keyboard interaction or accessibility testing.
Let’s look at how to assert that an element is focused using toBeFocused() with a practical example.
Example of Assert Element Focused Using toBeFocused()
const { test, expect } = require('@playwright/test');
test('Example: Assert element focused using toBeFocused() assertion in playwright.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2015/03/chart.html');
//Locate element
const input = page.locator('#tooltip-1');
//Set focus on textbox.
await input.focus();
//Assert element focused.
expect(input).toBeFocused();
});Code Breakdown
- await input.focus(): It will set focus on located input element.
- expect(input).toBeFocused(): It will assert if focus is set or not.
Focusing Non-Input Elements
Sometimes, you may need to focus on an element that is not an input field, such as a div, span, or a custom widget. In such cases, Playwright allows you to force the focus using the force: true option. This is helpful when the element is not naturally focusable or when it’s hidden behind another layer.
Syntax to force focus
await page.locator('.custom-div').focus({ force: true });Test Keyboard Navigation After Focus
If you want to test Tab key navigation after you focus on an element, you can use Playwright’s press() method with the ‘Tab’ key. This simulates keyboard navigation and allows you to move to the next focusable input element, which is useful for testing accessibility and form flow.
Example
await page.locator('#username').focus();
await page.keyboard.press('Tab'); // Moves focus to next elementFinal Thoughts
In Playwright, you can use the focus() method to set focus on interactive elements such as textboxes, buttons, or dropdowns. To verify whether the element is actually focused, you can use JavaScript (e.g., document.activeElement) or Playwright’s built-in toBeFocused() assertion. If you’re working with non-input elements that don’t naturally receive focus, you can force the focus using the force: true option.
Related Articles
- How to Hover Over element in Playwright With Example
- Wait for Element to Be Enabled in Playwright
- How to Check Element Enabled in Playwright
Hi, I’m Aravind, a seasoned Automation Test Engineer with 17+ years of industry experience. I specialize in tools like Selenium, JMeter, Appium, and Excel automation. Through this blog, I share practical tutorials, tips, and real-world insights to help testers and developers sharpen their automation skills.
