[Question] dialog does not appear, after click form-button-cancel (only works mode-debug)

Test works only mode-debug but not headed, Why?

After click a form-button-cancel it should appears an alert (Do you really want to discard the results?). The test try to waitFor the alert But it only works in mode-debug. In the other modes, the whole form is closed without showing the alert. Why?

• playwright version: ^1.21.1
• operating system: locally-> windows, cicd -> azure
• auth tool: keycloak

const {test, expect} = require('@playwright/test');
const myProject = 'demo-project-nuremberg';

test('click form-button-cancel does not show alert ', async ({page}) => {
  //login:
  await page.goto('https://dmitrygozman.fieldcode.com');
  await page.locator('[id="username"]').fill('[e-mail]');
  await page.locator('[id="password"]').fill('Dgozman123');
  await page.locator('[id="fc-login-button"]').click();

  //open sidebar:
  await page.locator('svg[data-icon="angle-double-right"] >> nth=0').waitFor();
  await page.locator('svg[data-icon="angle-double-right"] >> nth=0').click();

  //click button-create-ticket:
  await page.locator('[id="sidebarMenu"] >> [title="Create ticket"]').waitFor();
  await page.locator('[id="sidebarMenu"] >> [title="Create ticket"]').click();

  //chose project to open form:
  const selector_myproject = '[data-ui-test="ticketCreationProject"] >> text='+myProject+'';
  await page.locator(selector_myproject).waitFor({state:"visible"});
  //await page.locator(selector_myproject).click({delay:1000, force:true});
  await page.locator(selector_myproject).click({delay:1000});

  //check form is open:
  await page.locator('text=Create ticket for project').waitFor({state:"visible"});
  await expect(page.locator('text=Create ticket for project')).toBeVisible;


  //click form-button-cancel:
  /*
  Here is the problem , it works in mode-debug but not --headed ,etc. Why?
  after click ->  await page.locator(buttonCancel).click({delay:500});
  the whole form disappears, without showing the alert-discard-results
  */
  const buttonCancel = 'button:has-text("Cancel")';
  await page.locator(buttonCancel).waitFor({state:"visible"});
  await page.locator(buttonCancel).focus();
  await page.locator(buttonCancel).hover({force:true});
  await page.locator(buttonCancel).click({delay:500});  // What am I doing wrong in this click????


  //ERROR HERE! playwright can't find the dialog locator 
  await page.locator('text=Do you really want to discard the results?').waitFor();
  await page.locator('button:has-text("Yes")').waitFor();
  await page.locator('button:has-text("Yes")').click({delay:500});

  //check form is closed:
  const selector = 'text=Create ticket for project';
  await page.locator(selector).waitFor({state:"detached"});
  await expect(page.locator(selector)).toHaveCount(0);

});

[yury-s]

@AngelLopezBellmont the problem is that playwright clicks the button as soon as it becomes actionable which is enough in most cases but in your example the button is not immediately ready to handle clicks (perhaps click listener is not added / not properly setup yet), so you need to wait for a condition that is specific to your app to learn when the button becomes actionable (something like waitForFunction may come in handy). With that said this is a real bug in the app as a human can also click the button sometimes with no effect and the best approach would be to fix the behavior so that the button doesn’t show up or at least is disabled until it’s ready to handled clicks.

Closing the issue as there is no generic solution on the playwright end.

[mxschmitt]

@AngelLopezBellmont for me it looks more like a race condition inside the application. Since if you put a await page.waitForTimeout(500);before const buttonCancel = 'button:has-text("Cancel")'; it works for me.