How do I use the `click` method with the `position` option in @playwright/test to click on a specific part of an element?


Clicking on a Specific Part of an Element with @playwright/test

You can use the click method with the position option in @playwright/test to click on a specific part of an element. This allows you to specify the exact coordinates within the element where you want to click.

Here's an example where we click on the top left corner of an element:

await page.getElement(selector).click({ position: { x: 0, y: 0 } });

This method waits for the element to be in the DOM, become displayed, stop moving, and scroll into view if necessary. It also waits for it to receive pointer events at the action point and retries if necessary.

If an element overlays another element that intercepts clicks, you can use the force: true option to bypass actionability checks and force a click.

However, be careful with CSS selectors or XPath expressions. They can make your tests susceptible to breaking when changes are made in your DOM structure. Instead, @playwright/test recommends using resilient locators like role-based locators.

Also, @playwright/test has a test generator feature that can generate tests and pick locators prioritizing role-based locators first followed by text content then test id locators. This ensures unique identification of target elements without worrying about failing tests due to locator issues.

For more insights on how to write efficient @playwright/test scripts, check out this blog post.


Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

Related Questions

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

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 luc@ray.run.