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' });
button.scrollIntoViewIfNeeded();
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?"
Related Ask AI answer for "How do I use Playwright to click a button that is not currently visible in the viewport on Mobile Safari?".
Answer
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!
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 [email protected].