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
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
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.
我已经启动并运行了Web服务器,所以我不知道为什么它不能正常加载。
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.
在运行命令YAR PLAYRITRITER测试--UI之前,我确保应用程序正在运行,并启动Web服务器/前端。我验证了我可以在普通的谷歌Chrome上访问主页,并在后端终端上使用Postman...在另一项剧作家测试中,它确实做到了。但我的问题是,页面根本不加载任何东西,它只是一个带加载圈的空白屏幕。我需要加载它,这样我才能开始与文本字段等元素交互。
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.
请将您收到的错误与堆栈跟踪信息一起分享。
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.
这发生在PlayWriter非常快地完成并且在页面加载完成之前未通过测试时。
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.
使用像toBeVisible这样的Web断言会等待元素变为可见,这在此场景中很有帮助。
更多回答
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!
谢谢。就是这样。我想,当我在左右配置东西的时候,当我阅读关于等待、响应和其他剧作家特定信息的文档时,我不认为Web断言是合法的验证。我也不相信命令行也通过了。我只是假设我会在Pagee.goto()上看到这个网页,就像在Cypress中看到的一样。再次感谢!
You are welcome, glad I could helped.
不客气,很高兴我能帮上忙。
我是一名优秀的程序员,十分优秀!