[FEATURE]: Change div role:link to link or button

[gersanco]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe.

Hello,

I'm using Playwright to create an e2e test and sometimes when I execute my tests doesn't work because it doesn't click on the Paypal button, I think this is due to it being a div and it not catching the click event properly.

Describe the solution you'd like

Instead of being div role="link" use a button or a link. Also, include the disable to the element just to help the e2e test.

Describe alternatives you've considered

I tried with this

  private async waitForPayPalFrame() {
    await expect(this.page.locator('.paypal-buttons-disabled')).toBeHidden();
  }

  async payByPayPal() {
    const linkPaypal = this.paypalFrame.getByRole('link', { name: 'PayPal' });

    await this.currentPage
      .getByRole('heading', { name: 'Payment' })
      .scrollIntoViewIfNeeded();

    await linkPaypal.waitFor({
      state: 'visible',
    });

    await this.waitForPayPalFrame();

    await linkPaypal.click();
    await linkPaypal.click(); // INFO: Sometimes it needs to be clicked twice

    const page1 = await this.page1Promise;
    await page1.getByPlaceholder('Email or mobile number').click();
    ...

But, the error still happens randomly

➕ Anything else?

No response

[devchristina]

Hi @gersanco, you'll need to wait for the PayPal iframe to be loaded, and then switch context into the PayPal iframe to verify that this dom-ready class has been added. That way you can know for sure that the PayPal buttons are fully loaded and ready for interaction

[gersanco]

Hello @devchristina, I'm waiting, the thing is that sometimes when I click the PayPal link button, it doesn't do anything and I have to press it again.

test('should open The PayPal popup', async ({ page }) => {
  await page.goto('http://localhost:3000/');
  const page1Promise = page.waitForEvent('popup');
  await page
    .frameLocator('iframe[name^="__zoid__paypal_buttons"]')
    .getByRole('link', { name: 'PayPal' })
    .click({
      delay: 2000,
    });

  const page1 = await page1Promise;

  await expect(page1.getByPlaceholder('Email or mobile number')).toBeVisible();

  await page1.close();
  await page.close();
});

This is a test that I created using Playwright, most of the time it works, but at some random moments click on it but, it doesn't open the popup, instead bordering the button with a blue line like it was selected. For that reason, I added a delay of 2000 milliseconds but, It sometimes fails.

[gregjopa]

Hi @gersanco, its great to see you leveraging Playwright for e2e tests. Can you try adding a locator for the dom-ready class before selecting and clicking on the button inside the iframe?

await page
    .frameLocator('iframe[name^="__zoid__paypal_buttons"]')
    // this class gets added to the iframe body after the JavaScript has finished executing
    .locator('body.dom-ready')
    .getByRole('link', { name: 'PayPal' })
    .click({ delay: 2000 });

This paypal buttons iframe is a html document with inline javascript inside of it. It's best to wait for all of that inline javascript to finish executing before clicking on the button.

Please let us know if that helps make the click action more reliable.

[gersanco]

Hi @gregjopa, sure, I will include it, I will test a lot if that solves. I hope coming back with great news 😄

[gersanco]

Hello @gregjopa, I have been trying with your suggestion and no errors. Thanks a lot 🎊 😄

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!