Skip to content

Update part5: Chinese translation and correction of English materials #4107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 21, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 14 additions & 11 deletions src/content/5/en/part5d.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,8 @@ or remove the entry for any problematic browsers from your _playwright.config.js
// name: 'webkit',
// use: { ...devices['Desktop Safari'] },
//},
// ...
]
```

Let's define an npm script for running tests and test reports in _package.json_:
Expand Down Expand Up @@ -521,7 +523,7 @@ describe('Note app', () => {
await page.getByRole('button', { name: 'save' }).click()
await expect(page.getByText('a note created by playwright')).toBeVisible()
})
})
})
})
```

Expand Down Expand Up @@ -676,7 +678,7 @@ describe('Note app', () => {
})

// ...
)}
})
```

The test verifies with the method [page.getByText](https://playwright.dev/docs/api/class-page#page-get-by-text) that the application prints an error message.
Expand All @@ -700,7 +702,7 @@ const Notification = ({ message }) => {
We could refine the test to ensure that the error message is printed exactly in the right place, i.e. in the element containing the CSS class <i>error</i>:

```js
test('login fails with wrong password', async ({ page }) => {
test('login fails with wrong password', async ({ page }) => {
// ...

const errorDiv = page.locator('.error') // highlight-line
Expand All @@ -713,13 +715,13 @@ So the test uses the [page.locator](https://playwright.dev/docs/api/class-page#p
It is possible to test the application's CSS styles with matcher [toHaveCSS](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-css). We can, for example, make sure that the color of the error message is red, and that there is a border around it:

```js
test('login fails with wrong password', async ({ page }) => {
test('login fails with wrong password', async ({ page }) => {
// ...

const errorDiv = page.locator('.error')
await expect(errorDiv).toContainText('wrong credentials')
await expect(errorDiv).toHaveCSS('border-style', 'solid') // highlight-line
await expect(errorDiv).toHaveCSS('color', 'rgb(255, 0, 0)') // highlight-line
const errorDiv = page.locator('.error')
await expect(errorDiv).toContainText('wrong credentials')
await expect(errorDiv).toHaveCSS('border-style', 'solid') // highlight-line
await expect(errorDiv).toHaveCSS('color', 'rgb(255, 0, 0)') // highlight-line
})
```

Expand Down Expand Up @@ -757,7 +759,7 @@ describe(() => {
// this test is skipped...
test('user can login with correct credentials', async ({ page }) => {
// ...
}
})

// ...
})
Expand Down Expand Up @@ -853,7 +855,8 @@ describe('Note app', () => {
await loginWith(page, 'mluukkai', 'salainen') // highlight-line
})

// ...
// ...
})
})
```

Expand Down Expand Up @@ -1126,7 +1129,7 @@ By default, debug steps through the test command by command. If it is a complex
describe('Note app', () => {
beforeEach(async ({ page, request }) => {
// ...
}
})

describe('when logged in', () => {
beforeEach(async ({ page }) => {
Expand Down
2 changes: 1 addition & 1 deletion src/content/5/zh/part5.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,6 @@ lang: zh
- <i>Brought alongside Cypress as an alternative for Playwright End to end testing</i> -->
<i>2024年3月3日部分更新</i>
- <i>Jest被Vitests取代</i>
- <i>与Cypress一起,作为Playwright端到端测试的替代方案</i>
- <i>将Cypress与Playwright并列,作为一个端到端测试的替代方案</i>

</div>
Loading