Rayrun
← Back to Discord Forum

Button overlapping

Hi guys, i just ran into a problem with buttons overlapping, i am working on a project which has a map, inside the map i need to click a location but sometimes there are a lot of locations at the same place and all of them are overlapped, on my code i can locate them easily but when clicked, it always clicks the first one from the overlapped buttons, zooming in is not an option here. Thanks 🙂

This thread is trying to answer question "How can I click on overlapped location buttons on a map without zooming in?"

0 replies

Answer

Clicking Overlapped Buttons with Playwright

Hey there! Let's talk about how you can use Playwright to click on overlapped location buttons on a map without zooming in.

Using Locators

First, you'll need to use the locator method with the right selectors to target the buttons. You can use CSS selectors or XPath expressions, depending on your needs.

Here's an example using Playwright's TypeScript API:

// Navigate to the map page
await page.goto('https://ray.run/map');

// Click on the location buttons
await page.locator('.location-button').click();

In this example, .location-button is the CSS class name of the overlapped location buttons. The click() method is used to perform a click action on all matched elements.

More Control with nth-match

If you need more control over which button to click when they are overlapped, you can use other locators provided by Playwright. For instance, you can use :nth-match() selector along with waitFor() method to wait until all buttons are visible before clicking:

await page.locator(':nth-match(.location-button, 3)').waitFor();
await page.locator(':nth-match(.location-button, 3)').click();

In this code snippet, :nth-match(.location-button, 3) selects the third matching button with class name .location-button. The waitFor() method ensures that all three buttons are visible before performing the click action.

Remember, these examples assume certain HTML structure and CSS classes. You may need to adapt them based on your specific scenario.

By leveraging Playwright's locators and interaction methods like click(), you can effectively click on overlapped location buttons without zooming in on a map. Happy testing!

Related Discord Threads

TwitterGitHubLinkedIn
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.