[BUG] A page.click() that initiates a navigation requires a waitFor() before a page.goto()

[thernstig]

Context:

• Playwright Version: 0.15.0
• Operating System: Ubuntu 18.04.4

Code Snippet

const {chromium, webkit, firefox} = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('http://0.0.0.0/login.html');
  await page.fill('input[type=text]', 'admin');
  await page.fill('#password', 'admin');
  await page.click('#button');
  await page.waitFor('my-cool-app-container', {
    waitFor: 'visible', // This one is required for some reason
  });
  await page.goto('http://0.0.0.0/#my-second-cool-app}');
})();

Describe the bug

When initiating a navigation via await page.click('#button') I need the intermediate page.waitFor() to wait for an element to appear, before doing the next await page.goto('http://0.0.0.0/#my-second-cool-app}'). I am not sure why or if it is needed, but my reasoning is that it should not be and that there is some kind of bug happening here. I can mention it is intermittent and most often it works properly.

The printout that can happen is this Navigation interrupted by another one while navigating to http://0.0.0.0/#my-second-cool-app.

[sagrawal-idrc]

await page.fill('#password', 'admin);

There is a syntax error in this line (single quote is missing for admin). Hopefully, got inserted while copying?

[thernstig]

await page.fill('#password', 'admin);

There is a syntax error in this line (single quote is missing for admin). Hopefully, got inserted while copying?

Correct, the single quote was accidentally removed. Thanks!

[sagrawal-idrc]

Does clicking on #button trigger some navigation? I think that might be interfering with the other navigation triggered by goto.

Edit: Sorry, I see that you have mentioned that clicking the button does trigger navigation. I think that will interfere with the goto command and having the waitFor allows one navigation to finish before commencing the new one.

[pavelfeldman]

Looks indeed like a bug, thanks for the report @thernstig.

[pavelfeldman]

@thernstig: Is this a simple form with a regular submit button? Or could it be that your await page.click('#button'); does not actually initiate a navigation, but is rather doing something asynchronously and then initiates the navigation in the middle of your page.goto?

If that is the case, you can:

await Promise.all([
  page.waitForNavigation(),
  page.click('#button')
]);

[pavelfeldman]

Could you reopen in case this was not async navigation? Thanks!

[thernstig]

@pavelfeldman What happens when the submit button is pressed, a request is sent to the backend like so:

          response = await post("login", {
            username,
            password,
          });

When this happens, we are debouncing the login attempt for 1 sec (for "reasons" that are bad - we will change this).

I assume this is exactly your point above, and in this case we do need the Promise.all? I did verify by changing the code and it does work nicely.