CODEWITHSUNDEEP
playwright
Tom
Tom

Reputation: 1991

Playwright frame can click input but not button

I have installed PlayWright version 1.27.1 and am attempting to create some simple tests as proof of concept. My site has heavy use of an iframe with react code in it so I wanted to prove I could interact with the frame, but am finding it impossible to click a button in that frame. I am using data-testid for the elements I want to interact with. An input element is possible to click and fill out, but the button is failing and I have tried finding it multiple ways, but all fail. In debug the waiting message sits looking for the button until it times out.

In the below two lines of code the top item works perfectly, and the second one times out.

await page.frameLocator('#managementv2-iframe').getByTestId('searchCustomers').click();
await page.frameLocator('#managementv2-iframe').getByTestId('AddProfile').click();

Here is my HTML structure enter image description here

UPDATE

I have altered the code to narrow down the issue and it is finding the button, but the click is timing out. The below image says it is outside of the viewport, but it is visible.

enter image description here

UPDATE 2 I have updated the code to test the button for visibility and text. Only the click is having issues. The button is clearly visible in the page, not floating, positioned with flex. enter image description here

TRACE


locator.click: Element is outside of the viewport
=========================== logs ===========================
  waiting for frame "#managementv2-iframe"
  selector resolved to visible <iframe width="100%" height="100%" allow="camera *;" id=…>↵⇆<meta http-equiv="Pragma" content="no-cache">↵⇆…</iframe>
waiting for selector "#managementv2-iframe >> internal:control=enter-frame >> internal:attr=[data-testid="AddProfile"]"
  selector resolved to visible <button type="button" class="jss54 primary" data-testid=…>…</button>
attempting click action
  waiting for element to be visible, enabled and stable
    forcing action
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
============================================================

  41 |  await expect(addButton).toBeVisible();
  42 |  await expect(addButton).toHaveText('Add Profile');
> 43 |  await addButton.click({force: true});
     |                  ^
  44 |  await expect(page).toHaveURL('https://2249.whatever');
  45 |
  46 |  // await v2Frame?.getByTestId('AddProfile').click();

    at c:\asp.net\pw\tests\CustomersV2.spec.ts:43:18
    at c:\asp.net\pw\node_modules\@playwright\test\lib\workerRunner.js:426:9
    at TestInfoImpl._runFn (c:\asp.net\pw\node_modules\@playwright\test\lib\testInfo.js:166:7)
    at c:\asp.net\pw\node_modules\@playwright\test\lib\workerRunner.js:376:26
    at TimeoutManager.runWithTimeout (c:\asp.net\pw\node_modules\@playwright\test\lib\timeoutManager.js:73:7)
    at TestInfoImpl._runWithTimeout (c:\asp.net\pw\node_modules\@playwright\test\lib\testInfo.js:154:26)
    at WorkerRunner._runTest (c:\asp.net\pw\node_modules\@playwright\test\lib\workerRunner.js:356:5)
    at WorkerRunner.runTestGroup (c:\asp.net\pw\node_modules\@playwright\test\lib\workerRunner.js:218:11)
    at process.<anonymous> (c:\asp.net\pw\node_modules\@playwright\test\lib\worker.js:88:5)

Upvotes: 1

Views: 1856

Answers (1)

Suraj Sahu
Suraj Sahu

Reputation: 11

elements in iframe cannot be interacted with if iframe out of viewport. Source: https://github.com/microsoft/playwright/issues/3166

This should work with headless mode, please give it a try.

Upvotes: 1

Related Questions