I'm encountering difficulties with the homepage loading in my application, despite having what I believe to be correct configurations. The test and playwright config are as follows:
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 also doesn't work
await page.goto('http://localhost:3000/', {
waitUntil: 'domcontentloaded',
timeout: 60000,
});
...
}
playwright.config.ts
import { defineConfig, devices } from '@playwright/test'
export default defineConfig {
testDir: 'tests',
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',
},
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'Google Chrome',
use: { ...devices['Desktop Chrome'], channel: 'chrome' },
},
],
webServer: {
command: 'yarn dev',
url: 'http://localhost:3000',
reuseExistingServer: true,
},
}
The webserver is operational, so I am puzzled as to why it's failing to load properly.
Prior to running the command yarn playwright test --ui, I ensure that the app is up and the webServer/front-end is running. I've confirmed that I can access the home page normally on Google Chrome and the backend endpoints using Postman... both of which work fine in another playwright test. However, the issue persists with the page displaying nothing but a blank screen and a loading circle. It needs to load for me to start interacting with elements such as text fields.
I'm still navigating TypeScript and although experienced with Cypress, grappling with this Playwright setup for the basics has been challenging.