[Bug]: Playwright stuck at about:blank instead of opening the test page

DanielStoica85 commented 1 month ago

Version

1.44.1

Steps to reproduce

I have a very basic new Playwright project setup and all I am doing for now is to try and run a test to open a page. I tried with different URLs and the result is always the same, instead of opening the test page, the browser gets stuck at about:blank.

Here's the config file:

// @ts-check
const { defineConfig, devices } = require('@playwright/test');

/**
 * Read environment variables from file.
 * https://github.com/motdotla/dotenv
 */
// require('dotenv').config();

/**
 * @see https://playwright.dev/docs/test-configuration
 */
module.exports = defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 2 : undefined,
  reporter: [['list'], ['html', { open: 'never' }]],
  timeout: 60000,
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    baseURL: 'https://www.fedex.com/en-us/',
    screenshot: 'only-on-failure',
    trace: 'on-first-retry',
    viewport: { width: 1440, height: 1080 },
    video: 'on-first-retry',
  },
  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    // {
    //   name: 'firefox',
    //   use: { ...devices['Desktop Firefox'] },
    // },

    // {
    //   name: 'webkit',
    //   use: { ...devices['Desktop Safari'] },
    // },
    /* Test against mobile viewports. */
    // {
    //   name: 'Mobile Chrome',
    //   use: { ...devices['Pixel 5'] },
    // },
    // {
    //   name: 'Mobile Safari',
    //   use: { ...devices['iPhone 12'] },
    // },

    /* Test against branded browsers. */
    // {
    //   name: 'Microsoft Edge',
    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
    // },
    // {
    //   name: 'Google Chrome',
    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
    // },
  ],
});

Here is the test file:

// @ts-check
const { test, expect } = require('@playwright/test');

test.beforeEach('Given I open the en-us homepage', async ({ page }) => {
  console.log(`Running ${test.info().title}`);
  await page.goto('home.html');
  await page.getByRole('link', { name: 'close' }).click();
});

test('Rate & Ship (example test)', async ({ page }) => {
  await test.step('When I click the Get Rate and Shipping Details button', async () => {
    await page
      .getByRole('button', { name: 'Get Rate and Shipping Details' })
      .click();
  });

  await test.step('Then I should see the options for calculating shipping rates displayed', async () => {
    await expect(
      page.getByRole('heading', { name: 'Calculate FedEx shipping rates' })
    ).toBeVisible();
    await expect(page.getByLabel('From address, type in the')).toBeVisible();
    await expect(page.getByLabel('To address, type in the full')).toBeVisible();
  });
});

Expected behavior

Bowser navigates to the test page url.

Actual behavior

Error: page.goto: Test timeout of 60000ms exceeded.
    Call log:
      - navigating to "https://www.fedex.com/en-us/home.html", waiting until "load"

 pw:api => selectors.setTestIdAttribute started +0ms
  pw:api => browserType.launch started +5ms
  pw:api <= selectors.setTestIdAttribute succeeded +8ms
  pw:api <= browserType.launch succeeded +285ms
  pw:api => browser.newContext started +2ms
  pw:api <= browser.newContext succeeded +7ms
  pw:api => browserContext.newPage started +3ms
  pw:api <= browserContext.newPage succeeded +97ms
Running Rate & Ship (example test)
  pw:api => page.goto started +2ms
  pw:api navigating to "https://www.fedex.com/en-us/home.html", waiting until "load" +2ms
  pw:api => page.screenshot started +30s
  pw:api taking page screenshot +2ms
  pw:api waiting for fonts to load... +1ms
  pw:api fonts loaded +0ms
  pw:api <= page.screenshot failed +5s
  pw:api <= page.goto failed +9ms

Additional context

If I run it by using the VS Code extension, after a few retries it will start working.

If I run it in the terminal with npx playwright test, it never works.

Also, the page I gave is just an example, I tried with other websites as well and the result is always the same.

Environment

System:
    OS: macOS 14.4.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 1.24 GB / 32.00 GB
  Binaries:
    Node: 18.7.0 - ~/.nvm/versions/node/v18.7.0/bin/node
    npm: 8.15.0 - ~/.nvm/versions/node/v18.7.0/bin/npm
  IDEs:
    VSCode: 1.89.1 - /usr/local/bin/code
  Languages:
    Bash: 3.2.57 - /bin/bash
  npmPackages:
    @playwright/test: ^1.44.1 => 1.44.1

dgozman commented 1 month ago

@DanielStoica85 Unfortunately, I cannot reproduce the issue. page.goto() always works for me, but the test is stuck on page.getByRole('link', { name: 'close' }).click() because there is no "close" button on the page.

I'd recommend to use the debugging tools or record a trace and inspect it. We won't be able to help without reproducing the issue.

DanielStoica85 commented 1 month ago

You can ignore all of the steps that come after page.goto(), because the same thing will happen even if I change to a one step test like opening Google and that's it.

I will try what you suggested and get back to you.

DanielStoica85 commented 1 month ago

@DanielStoica85 Unfortunately, I cannot reproduce the issue. page.goto() always works for me, but the test is stuck on page.getByRole('link', { name: 'close' }).click() because there is no "close" button on the page.

I'd recommend to use the debugging tools or record a trace and inspect it. We won't be able to help without reproducing the issue.

I tried recording a trace and even opening the trace gives me a similar error:

npx playwright show-trace test-results/rate-ship-Rate-Ship-example-test--chromium/trace.zip
TimeoutError: Timeout 30000ms exceeded.

Later update: opening the trace only works from the report, but I can't see anything helpful. Can you please suggest what I should look for?

And one more update: even the test shown below fails for the same reason.

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

DanielStoica85 commented 1 month ago

I noticed something else that might be helpful.

So like I said, navigation fails at first attempt, even when running the test by using the VS code extension. But after failing for the first time, if you rerun (without closing the browser) it will work on second attempt. And third, and so on... As long as you do not close the browser!

But then if you close the browser again and trigger a run, it will fail again at first attempt and you have to restart the process of retrying.

All of this happens when running with the VS Code extension. When running from the terminal, it always fails.

Debugging in UI mode is also impossible to do because it gets stuck like this:

dgozman commented 1 month ago

@DanielStoica85 All the symptoms suggest that the browser is having troubles loading.

In the trace viewer, try looking at the network tab - do you see anything there?
Separately, try running in the terminal with DEBUG=pw:browser npx playwright test to see whether the browser has some interesting output.

DanielStoica85 commented 1 month ago

Thanks for getting back to me!

All I see in the trace viewer (network tab) is this:

As for your second suggestion, this is what I get:

pw:browser <launched> pid=29779 +7ms
  pw:browser [pid=29779] <gracefully close start> +35s
  pw:browser [pid=29779] <process did exit: exitCode=0, signal=null> +10s
  pw:browser [pid=29779] starting temporary directories cleanup +0ms
  pw:browser [pid=29779] finished temporary directories cleanup +13ms
  pw:browser [pid=29779] <gracefully close end> +1ms

dgozman commented 1 month ago

@DanielStoica85 Interesting! There are no browser errors, but the network request is stuck forever. Perhaps you've got a firewall or a corporate proxy that does not let the network requests through? Maybe you should add Playwright's Chromium binary to some list of exceptions?

One more suggestion is to try with the Google Chrome browser. Change your config like this:

...
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
    },

DanielStoica85 commented 1 month ago

If a network proxy/firewall would be the problem, then it would never work. But like I explained above, after failing for the first time, if you rerun (without closing the browser) it will work on second attempt. And third, and so on... As long as you do not close the browser! Only when running from the terminal, it never works.

This was the result when running with Chrome browser:

pw:browser <launched> pid=71980 +6ms
  pw:browser [pid=71980] <gracefully close start> +35s
  pw:browser [pid=71980] <process did exit: exitCode=0, signal=null> +10s
  pw:browser [pid=71980] starting temporary directories cleanup +1ms
  pw:browser [pid=71980] finished temporary directories cleanup +14ms
  pw:browser [pid=71980] <gracefully close end> +0ms

dgozman commented 1 month ago

@DanielStoica85 Unfortunately, I am out of ideas at this point. I'll keep the issue open for some time, just in case someone would have an idea. If you gather more information that could be helpful, please comment here.

klh commented 1 month ago

I ran into the same issue, it has something to do with the test name of test.info / annotation - try renaming the tests and removing all annotations.

klh commented 1 month ago

same code that exhibited thisbehaviour, when moved to a different test with a different name (in same describe bracket) worked fine.

so something is buggy in there.

DanielStoica85 commented 1 month ago

same code that exhibited thisbehaviour, when moved to a different test with a different name (in same describe bracket) worked fine.

so something is buggy in there.

For me it fails even if I use the example test that Playwright gives.

import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

mxschmitt commented 1 month ago

@DanielStoica85 could you please give us the output of npx playwright --version?

Is your machine corp-hosted / managed by some company policies? Or do you have special anti-virus software on your machine?

DanielStoica85 commented 1 month ago

@DanielStoica85 could you please give us the output of npx playwright --version?

Is your machine corp-hosted / managed by some company policies? Or do you have special anti-virus software on your machine?

Sure.

Version 1.44.1

As for the second question: the laptop is indeed managed by some company policies and there is company software installed on it (not just anti-virus). But if that would be the problem, wouldn't it always fail?

Ah, might also be worth mentioning that I tried another Playwright project created at my company and that one works. One main difference is that it uses a specific (older) version of Playwright: 1.33.0.

mxschmitt commented 1 month ago

As for the second question: the laptop is indeed managed by some company policies and there is company software installed on it (not just anti-virus). But if that would be the problem, wouldn't it always fail?

Absolutely! But that might depend on what exactly is inferring with it. Your config uses Chromium - so ideally no enterprise policies apply there. If we are talking about Chrome policies, they usually only apply to Google Chrome and Microsoft Edge.

Ah, might also be worth mentioning that I tried another Playwright project created at my company and that one works. One main difference is that it uses a specific (older) version of Playwright: 1.33.0.

It might be worth trying the following:

go over the Playwright versions to find out which one was the last one which was working.
make sure it works / or not with a newly created project: https://playwright.dev/docs/intro

Appreciate the digging - since we unfortunately run out of ideas here.

DanielStoica85 commented 1 month ago

Hey @mxschmitt !

Thanks a lot for still trying to help, I know it almost seems like a hopeless situation, but I am not ready to give up just yet, haha. :)

Yes, I mostly use Chromium, but I also tried with the other two and the result was the same.
I already tried with a new project. Even this one was a new project a few days ago. The end-result is always the same, even if I just run the example test that gets added by Playwright when initializing a new project.
I started going down in versions one by one and here is what happened:

when I got to version 1.37.1, it seemed like there might be some hope, as it was working in around 1 out of 3-4 tries, but that was it - it might have been just a coincidence, as even with the latest version it does work in the terminal from time to time (very rarely);
I went all the way to 1.33.0 and I decided to stop there. If you think I should try even lower versions, I can do that. The only "improvement" I saw while doing all of this was that for some versions it works intermittently (in 1 out of 3-4 attempts), but this is not very helpful.

Not sure what else to try.

microsoft / playwright