Playwright test not loading local url

Question

I'm having trouble loading the homepage of my application even though I think I have things configured correctly. The test and playwright config are the follwing:

example.spec.ts

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

test('Visit Pages', async ({ page }) => {

  await page.goto('https://playwright.dev/') -- this works
  await page.goto('http://localhost:3000/'); -- this does not work

  //this doesn't work either
  await page.goto('http://localhost:3000/', {
    waitUntil: 'domcontentloaded',
    timeout: 60000,
  });
  ...
}

playwright.config.ts

import { defineConfig, devices } from '@playwright/test'

export default defineConfig {
  testDir: 'tests',
  //also added in headless false but no difference
  headless: false,
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    storageState: './state.json'
    trace: 'on-first-retry',
  },
  // Configure projects for major browsers.
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'Google Chrome',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
    },
  ],
  // Run your local dev server before starting the tests.
  webServer: {
    command: 'yarn dev',
    url: 'http://localhost:3000',
    reuseExistingServer: true,
  },
}

I have the webserver up and running so I don't know why it's not loading like it should be.

Before running the command yarn playwright test --ui , I make sure the app is running and spin up the webServer/front-end. I verified that I can reach the home page as expected on the normal google chrome, and on the back-end endpoints with Postman... Which in another playwright test it actually does. But my issue is that the page just doesn't load anything at all, it's just a blank screen with a loading circle. I need it to load so I can start interacting with elements like text fields.

I'm still not familiar with typescript and although I am familiar with Cypress, this Playwright setup for the basic things is throwing me for a loop.

Please share the error you are getting with stacktrace info. — Vishal Aggarwal
– Vishal Aggarwal, Commented Sep 10, 2023 at 13:21
If you're setting a baseURL, then just use page.goto("/"). — ggorlen
– ggorlen, Commented Jul 2, 2024 at 6:34

Vishal Aggarwal · Accepted Answer · 2023-09-10 13:41:49Z

5

I think verifying the visibility of any element which is visible after page load will help for example like typical welcome text on home page can be verified.

This happens as playwright being very fast finishes and fails test before page load completes.

await page.goto('http://localhost:3000/')

await expect(page.getByText('Welcome')).toBeVisible()

Using an web assertion like toBeVisible waits till element becomes visible which is helpful in this scenario.

edited Sep 10, 2023 at 13:41

answered Sep 10, 2023 at 13:34

Vishal Aggarwal

1

Sign up to request clarification or add additional context in comments.

1 Comment

E.C Over a year ago

Thank you. That did it. I think while I was configuring things left and right, I didn't think a web assertion was a legitimate validation when I would read docs about awaits, responses, and other playwright specific information. I also didn't believe the command line passing also. I was just assuming that I would see the webpage like I would in Cypress, on the page.goto(). Thanks again!

Collectives™ on Stack Overflow

Playwright test not loading local url

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related