← Back to Discord Forum

click on a button outside of viewport on mobile safari


as the title says. this is the project config:

  name: 'Mobile Safari',
  use: { ...devices['iPhone 13 Pro Max'] }

I have tried this:

await page.waitForSelector("button:has-text('Allow')", { state: 'visible' });
const button = page.getByRole('button', { name: 'Allow' });
await page.getByRole('button', { name: 'Allow' }).click();

I have also tried with click({ force: true }), no luck.

Sadly, this happens during a third party integration, in a page that is outside my control. That page is basically horrible and the button sits outside the viewport on some mobile devices.

I will attach a video of the test running below.

This thread is trying to answer question "How can a button outside of the viewport on mobile Safari be clicked?"

1 reply

here you can see the browser absolutely freaking out trying to scroll sideways lol


Sure, you can click a button outside the viewport on Mobile Safari with Playwright. Here's how:

First, find the button using Playwright's locator methods like page.locator() or page.$(). Once you've got the button, use the scrollIntoViewIfNeeded() method to make sure it's in the viewport. Then, you're ready to click it with the click() method.

Here's a quick TypeScript code snippet to show you how it's done:

// Find the button and scroll it into view
const button = await page.locator('button').first();
await button.scrollIntoViewIfNeeded();

// Now click the button
await button.click();

This way, even if a button is outside the viewport on Mobile Safari, you can still click it successfully. Just remember, you're using Playwright for browser automation and testing, and different browsers might behave a little differently with elements outside the viewport.

If you need more help or clarification, just ask!

Related Discord Threads

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.