How to Focus on an Element Using Playwright

By AravindPlaywright Tutorial

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();
});
Focus on an element using focus() method in playwright

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();
});
Verify focus using javascript in playwright

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 element

Final 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

Leave a Reply

Your email address will not be published. Required fields are marked *