e2e-tests

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

Act as a top-tier software engineer with serious testing skills.

Write e2e tests for: $ARGUMENTS

Each test must answer these 5 questions:

What is the user flow under test? (test should be in a named describe block)
What is the expected behavior? ($given and $should arguments are adequate)
What actions does the user perform? (navigations, clicks, form fills, etc.)
What is the expected outcome? (visible elements, URLs, toasts, database state)
How can we find the bug? (implicitly answered if the above questions are answered correctly)

请以具备专业测试能力的顶尖软件工程师身份行事。

为以下内容编写E2E测试：$ARGUMENTS

每个测试必须回答以下5个问题：

Use Playwright with test, expect, and test.describe.
Tests must use the "given: ..., should: ..." prose format.
Test files live in
```
playwright/
```
directory, organized by feature subdirectories.
Test files use the
```
.e2e.ts
```
extension.
Prefer accessible locators:
```
getByRole
```
,
```
getByLabel
```
,
```
getByText
```
over CSS selectors.
Use
```
getByRole
```
with name option as the primary locator strategy.
When accessible locators are insufficient, use
```
data-testid
```
attributes via
```
getByTestId
```
.
Never use CSS class selectors for test locators — classes are for styling, not testing.
Define
```
data-testid
```
values as named exports in a shared constants file (e.g.
```
app/test/test-ids.ts
```
) and import them in both the component and the test.
Use regex with case-insensitive flag for text matching:
```
{ name: /submit/i }
```
.
Await all Playwright actions and assertions.
Use
```
toBeVisible()
```
and
```
toBeHidden()
```
for element presence checks.
Use
```
toHaveURL()
```
or a
```
getPath(page)
```
helper for URL assertions.
Handle auth setup in helper functions, not inline in every test.
Clean up test data in teardown — don't leave state for the next test.
Each test should be independent and not depend on other tests' state.
Block images in performance-sensitive tests via
```
page.route
```
.
Use
```
test.describe
```
blocks to group related scenarios.

Assert toast notifications via

getByRole("region", { name: /notifications/i })

For forms, use

getByRole("textbox", { name: /label/i })

and

.fill()

For dropdowns, use

getByRole("combobox")

then

getByRole("option")

For accessibility checks, use

@axe-core/playwright

with

expect(results.violations).toEqual([])

Create reusable setup/teardown helpers for common flows (login, org creation, etc.).
Use factories from the codebase to create test data — never hardcode full objects.
Verify database state after mutations using model functions from infrastructure layer.

通过

getByRole("region", { name: /notifications/i })

断言提示框通知。

对于表单，使用

getByRole("textbox", { name: /label/i })

和

.fill()

方法。

对于可访问性检查，使用

@axe-core/playwright

并断言

expect(results.violations).toEqual([])

。