mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
chore(i18n,docs): processed translations (#51652)
This commit is contained in:
camperbot
@@ -1,6 +1,6 @@
|
||||
# How to add Playwright tests
|
||||
|
||||
## Installation:
|
||||
## Installation
|
||||
|
||||
To install Playwright run:
|
||||
|
||||
@@ -14,19 +14,153 @@ To install and configure Playwright on your machine check out this [documentatio
|
||||
|
||||
To learn how to write Playwright tests, or 'specs', please see Playwright's official [documentation](https://playwright.dev/docs/writing-tests).
|
||||
|
||||
|
||||
## Where to Add a Test
|
||||
|
||||
- Playwright tests are in the `./e2e` directory.
|
||||
|
||||
- Playwright test files are always with a `.spec.ts` extension.
|
||||
|
||||
## How to Run Tests
|
||||
## Best Practices for writing e2e tests
|
||||
|
||||
This section will explain in detail about best practices for writing and documenting E2E tests based on playwright documentation and our community code-style.
|
||||
|
||||
### - Identifying a DOM element
|
||||
|
||||
Always use the `data-playwright-test-label` attribute to identify DOM elements. This attribute is used to identify elements in the DOM for testing with playwright only. It is not used for styling or any other purpose.
|
||||
|
||||
For example:
|
||||
|
||||
```html
|
||||
<div data-playwright-test-label="landing-page-figure">
|
||||
<img src="..." alt="..." />
|
||||
</div>
|
||||
```
|
||||
|
||||
Make sure you use the getByTestId method to identify the element in the test file.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
const landingPageFigure = page.getByTestId('landing-page-figure');
|
||||
```
|
||||
|
||||
### - Imports
|
||||
|
||||
Always start with necessary imports at the beginning of the file.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
import { test, expect, type Page } from '@playwright/test';
|
||||
```
|
||||
|
||||
### - Constants
|
||||
|
||||
Define any constant elements, data sets, or configurations used throughout your tests for easy reference.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
const landingPageElements = { ... };
|
||||
const superBlocks = [ ... ];
|
||||
```
|
||||
|
||||
### - Shared Context
|
||||
|
||||
If tests depend on a shared context (like a loaded web page), use beforeAll and afterAll hooks to set up and tear down that context.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
let page: Page;
|
||||
|
||||
beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage();
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
await page.close();
|
||||
});
|
||||
```
|
||||
|
||||
### - Descriptive test names
|
||||
|
||||
Each test block should have a clear and concise name describing exactly what it's testing.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
test('The component landing-top renders correctly', async ({ page }) => {
|
||||
...
|
||||
});
|
||||
```
|
||||
|
||||
### - Human readable assertions
|
||||
|
||||
Each assertion should be as human readable as possible. This makes it easier to understand what the test is doing and what it's expecting.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
await expect(landingHeading1).toHaveText('Learn to code — for free.');
|
||||
```
|
||||
|
||||
### - Keep it DRY
|
||||
|
||||
Make sure that the tests are not repeating the same code over and over again. If you find yourself repeating the same code, consider refactoring it as a loop or a function.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
for (const logo of await logos.all()) {
|
||||
await expect(logo).toBeVisible();
|
||||
}
|
||||
```
|
||||
|
||||
### - Tests for mobile screens
|
||||
|
||||
Use the 'isMobile' argument to run tests that incude logic that varies for mobile screens.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({isMobile}) =>
|
||||
{
|
||||
const landingPageImage = page.getByTestId('landing-page-figure');
|
||||
|
||||
if (isMobile) {
|
||||
await expect(landingPageImage).toBeHidden();
|
||||
} else {
|
||||
await expect(landingPageImage).toBeVisible();
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### - Group related tests
|
||||
|
||||
Group related tests together using describe blocks. This makes it easier to understand what the tests are doing and what they're testing.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
describe('The campers landing page', () => {
|
||||
test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({isMobile}) =>
|
||||
{
|
||||
...
|
||||
});
|
||||
|
||||
test('The campers landing page figure has the correct image', async () => {
|
||||
...
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## How to Run Tests
|
||||
|
||||
### 1. Ensure that MongoDB and Client Applications are Running
|
||||
|
||||
- [Start MongoDB and seed the database](how-to-setup-freecodecamp-locally.md#step-3-start-mongodb-and-seed-the-database)
|
||||
- [Start MongoDB and seed the database](how-to-setup-**freecodecamp**-locally.md#step-3-start-mongodb-and-seed-the-database)
|
||||
|
||||
- [Start the freeCodeCamp client application and API server](how-to-setup-freecodecamp-locally.md#step-4-start-the-freecodecamp-client-application-and-api-server)
|
||||
|
||||
@@ -35,6 +169,7 @@ To learn how to write Playwright tests, or 'specs', please see Playwright's offi
|
||||
To run tests with Playwright check the following below
|
||||
|
||||
- Make sure you navigate to the e2e repo first
|
||||
|
||||
```console
|
||||
cd e2e
|
||||
```
|
||||
@@ -64,6 +199,7 @@ To run tests with Playwright check the following below
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```console
|
||||
npx playwright test tests/todo-page/ tests/landing-page/
|
||||
```
|
||||
@@ -75,6 +211,7 @@ To run tests with Playwright check the following below
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```console
|
||||
npx playwright test -g "add a todo item"
|
||||
```
|
||||
@@ -139,13 +276,12 @@ Playwright is generally a solid bullet-proof tool. The contributor has already c
|
||||
```console
|
||||
Protocol error (Network.getResponseBody): Request content was evicted from inspector cache
|
||||
```
|
||||
|
||||
1. The network request was made using a method that does not include a response body, such as HEAD or CONNECT.
|
||||
2. The network request was made over a secure (HTTPS) connection, and the response body is not available for security reasons.
|
||||
3. The network request was made by a third-party resource (such as an advertisement or a tracking pixel) that is not controlled by the script.
|
||||
4. The network request was made by a script that has been paused or stopped before the response was received.
|
||||
|
||||
|
||||
|
||||
**For more insights on issues visit the official documentation.**
|
||||
|
||||
## Playwright-Gitpod Setup
|
||||
@@ -157,21 +293,25 @@ If starting the Gitpod environment did not automatically develop the environment
|
||||
- Follow the [MongoDB installation guide](https://www.mongodb.com/basics/get-started).
|
||||
|
||||
- Create the .env
|
||||
|
||||
```console
|
||||
cp sample.env .env
|
||||
```
|
||||
|
||||
- Create a config file.
|
||||
|
||||
```console
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Seed the database
|
||||
|
||||
```console
|
||||
pnpm run seed
|
||||
```
|
||||
|
||||
- Develop the server and client
|
||||
|
||||
```console
|
||||
pnpm run develop
|
||||
```
|
||||
@@ -184,7 +324,6 @@ To install necessary dependencies for running Playwright run the following comma
|
||||
pnpm run playwright:install-build-tools
|
||||
```
|
||||
|
||||
|
||||
### 3. Run the Playwright Tests on Gitpod
|
||||
|
||||
To run all Playwright tests, run the following command:
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# How to add Playwright tests
|
||||
|
||||
## Installation:
|
||||
## Installation
|
||||
|
||||
To install Playwright run:
|
||||
|
||||
@@ -14,19 +14,153 @@ To install and configure Playwright on your machine check out this [documentatio
|
||||
|
||||
To learn how to write Playwright tests, or 'specs', please see Playwright's official [documentation](https://playwright.dev/docs/writing-tests).
|
||||
|
||||
|
||||
## Where to Add a Test
|
||||
|
||||
- Playwright tests are in the `./e2e` directory.
|
||||
|
||||
- Playwright test files are always with a `.spec.ts` extension.
|
||||
|
||||
## How to Run Tests
|
||||
## Best Practices for writing e2e tests
|
||||
|
||||
This section will explain in detail about best practices for writing and documenting E2E tests based on playwright documentation and our community code-style.
|
||||
|
||||
### - Identifying a DOM element
|
||||
|
||||
Always use the `data-playwright-test-label` attribute to identify DOM elements. This attribute is used to identify elements in the DOM for testing with playwright only. It is not used for styling or any other purpose.
|
||||
|
||||
For example:
|
||||
|
||||
```html
|
||||
<div data-playwright-test-label="landing-page-figure">
|
||||
<img src="..." alt="..." />
|
||||
</div>
|
||||
```
|
||||
|
||||
Make sure you use the getByTestId method to identify the element in the test file.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
const landingPageFigure = page.getByTestId('landing-page-figure');
|
||||
```
|
||||
|
||||
### - Imports
|
||||
|
||||
Always start with necessary imports at the beginning of the file.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
import { test, expect, type Page } from '@playwright/test';
|
||||
```
|
||||
|
||||
### - Constants
|
||||
|
||||
Define any constant elements, data sets, or configurations used throughout your tests for easy reference.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
const landingPageElements = { ... };
|
||||
const superBlocks = [ ... ];
|
||||
```
|
||||
|
||||
### - Shared Context
|
||||
|
||||
If tests depend on a shared context (like a loaded web page), use beforeAll and afterAll hooks to set up and tear down that context.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
let page: Page;
|
||||
|
||||
beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage();
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
await page.close();
|
||||
});
|
||||
```
|
||||
|
||||
### - Descriptive test names
|
||||
|
||||
Each test block should have a clear and concise name describing exactly what it's testing.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
test('The component landing-top renders correctly', async ({ page }) => {
|
||||
...
|
||||
});
|
||||
```
|
||||
|
||||
### - Human readable assertions
|
||||
|
||||
Each assertion should be as human readable as possible. This makes it easier to understand what the test is doing and what it's expecting.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
await expect(landingHeading1).toHaveText('Learn to code — for free.');
|
||||
```
|
||||
|
||||
### - Keep it DRY
|
||||
|
||||
Make sure that the tests are not repeating the same code over and over again. If you find yourself repeating the same code, consider refactoring it as a loop or a function.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
for (const logo of await logos.all()) {
|
||||
await expect(logo).toBeVisible();
|
||||
}
|
||||
```
|
||||
|
||||
### - Tests for mobile screens
|
||||
|
||||
Use the 'isMobile' argument to run tests that incude logic that varies for mobile screens.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({isMobile}) =>
|
||||
{
|
||||
const landingPageImage = page.getByTestId('landing-page-figure');
|
||||
|
||||
if (isMobile) {
|
||||
await expect(landingPageImage).toBeHidden();
|
||||
} else {
|
||||
await expect(landingPageImage).toBeVisible();
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### - Group related tests
|
||||
|
||||
Group related tests together using describe blocks. This makes it easier to understand what the tests are doing and what they're testing.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
describe('The campers landing page', () => {
|
||||
test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({isMobile}) =>
|
||||
{
|
||||
...
|
||||
});
|
||||
|
||||
test('The campers landing page figure has the correct image', async () => {
|
||||
...
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## How to Run Tests
|
||||
|
||||
### 1. Ensure that MongoDB and Client Applications are Running
|
||||
|
||||
- [Start MongoDB and seed the database](how-to-setup-freecodecamp-locally.md#step-3-start-mongodb-and-seed-the-database)
|
||||
- [Start MongoDB and seed the database](how-to-setup-**freecodecamp**-locally.md#step-3-start-mongodb-and-seed-the-database)
|
||||
|
||||
- [Start the freeCodeCamp client application and API server](how-to-setup-freecodecamp-locally.md#step-4-start-the-freecodecamp-client-application-and-api-server)
|
||||
|
||||
@@ -35,6 +169,7 @@ To learn how to write Playwright tests, or 'specs', please see Playwright's offi
|
||||
To run tests with Playwright check the following below
|
||||
|
||||
- Make sure you navigate to the e2e repo first
|
||||
|
||||
```console
|
||||
cd e2e
|
||||
```
|
||||
@@ -64,6 +199,7 @@ To run tests with Playwright check the following below
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```console
|
||||
npx playwright test tests/todo-page/ tests/landing-page/
|
||||
```
|
||||
@@ -75,6 +211,7 @@ To run tests with Playwright check the following below
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```console
|
||||
npx playwright test -g "add a todo item"
|
||||
```
|
||||
@@ -139,13 +276,12 @@ Playwright is generally a solid bullet-proof tool. The contributor has already c
|
||||
```console
|
||||
Protocol error (Network.getResponseBody): Request content was evicted from inspector cache
|
||||
```
|
||||
|
||||
1. The network request was made using a method that does not include a response body, such as HEAD or CONNECT.
|
||||
2. The network request was made over a secure (HTTPS) connection, and the response body is not available for security reasons.
|
||||
3. The network request was made by a third-party resource (such as an advertisement or a tracking pixel) that is not controlled by the script.
|
||||
4. The network request was made by a script that has been paused or stopped before the response was received.
|
||||
|
||||
|
||||
|
||||
**For more insights on issues visit the official documentation.**
|
||||
|
||||
## Playwright-Gitpod Setup
|
||||
@@ -157,21 +293,25 @@ If starting the Gitpod environment did not automatically develop the environment
|
||||
- Follow the [MongoDB installation guide](https://www.mongodb.com/basics/get-started).
|
||||
|
||||
- Create the .env
|
||||
|
||||
```console
|
||||
cp sample.env .env
|
||||
```
|
||||
|
||||
- Create a config file.
|
||||
|
||||
```console
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Seed the database
|
||||
|
||||
```console
|
||||
pnpm run seed
|
||||
```
|
||||
|
||||
- Develop the server and client
|
||||
|
||||
```console
|
||||
pnpm run develop
|
||||
```
|
||||
@@ -184,7 +324,6 @@ To install necessary dependencies for running Playwright run the following comma
|
||||
pnpm run playwright:install-build-tools
|
||||
```
|
||||
|
||||
|
||||
### 3. Run the Playwright Tests on Gitpod
|
||||
|
||||
To run all Playwright tests, run the following command:
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# How to add Playwright tests
|
||||
|
||||
## Installation:
|
||||
## Installation
|
||||
|
||||
To install Playwright run:
|
||||
|
||||
@@ -14,19 +14,153 @@ To install and configure Playwright on your machine check out this [documentatio
|
||||
|
||||
To learn how to write Playwright tests, or 'specs', please see Playwright's official [documentation](https://playwright.dev/docs/writing-tests).
|
||||
|
||||
|
||||
## Where to Add a Test
|
||||
|
||||
- Playwright tests are in the `./e2e` directory.
|
||||
|
||||
- Playwright test files are always with a `.spec.ts` extension.
|
||||
|
||||
## How to Run Tests
|
||||
## Best Practices for writing e2e tests
|
||||
|
||||
This section will explain in detail about best practices for writing and documenting E2E tests based on playwright documentation and our community code-style.
|
||||
|
||||
### - Identifying a DOM element
|
||||
|
||||
Always use the `data-playwright-test-label` attribute to identify DOM elements. This attribute is used to identify elements in the DOM for testing with playwright only. It is not used for styling or any other purpose.
|
||||
|
||||
For example:
|
||||
|
||||
```html
|
||||
<div data-playwright-test-label="landing-page-figure">
|
||||
<img src="..." alt="..." />
|
||||
</div>
|
||||
```
|
||||
|
||||
Make sure you use the getByTestId method to identify the element in the test file.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
const landingPageFigure = page.getByTestId('landing-page-figure');
|
||||
```
|
||||
|
||||
### - Imports
|
||||
|
||||
Always start with necessary imports at the beginning of the file.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
import { test, expect, type Page } from '@playwright/test';
|
||||
```
|
||||
|
||||
### - Constants
|
||||
|
||||
Define any constant elements, data sets, or configurations used throughout your tests for easy reference.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
const landingPageElements = { ... };
|
||||
const superBlocks = [ ... ];
|
||||
```
|
||||
|
||||
### - Shared Context
|
||||
|
||||
If tests depend on a shared context (like a loaded web page), use beforeAll and afterAll hooks to set up and tear down that context.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
let page: Page;
|
||||
|
||||
beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage();
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
await page.close();
|
||||
});
|
||||
```
|
||||
|
||||
### - Descriptive test names
|
||||
|
||||
Each test block should have a clear and concise name describing exactly what it's testing.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
test('The component landing-top renders correctly', async ({ page }) => {
|
||||
...
|
||||
});
|
||||
```
|
||||
|
||||
### - Human readable assertions
|
||||
|
||||
Each assertion should be as human readable as possible. This makes it easier to understand what the test is doing and what it's expecting.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
await expect(landingHeading1).toHaveText('Learn to code — for free.');
|
||||
```
|
||||
|
||||
### - Keep it DRY
|
||||
|
||||
Make sure that the tests are not repeating the same code over and over again. If you find yourself repeating the same code, consider refactoring it as a loop or a function.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
for (const logo of await logos.all()) {
|
||||
await expect(logo).toBeVisible();
|
||||
}
|
||||
```
|
||||
|
||||
### - Tests for mobile screens
|
||||
|
||||
Use the 'isMobile' argument to run tests that incude logic that varies for mobile screens.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({isMobile}) =>
|
||||
{
|
||||
const landingPageImage = page.getByTestId('landing-page-figure');
|
||||
|
||||
if (isMobile) {
|
||||
await expect(landingPageImage).toBeHidden();
|
||||
} else {
|
||||
await expect(landingPageImage).toBeVisible();
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### - Group related tests
|
||||
|
||||
Group related tests together using describe blocks. This makes it easier to understand what the tests are doing and what they're testing.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
describe('The campers landing page', () => {
|
||||
test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({isMobile}) =>
|
||||
{
|
||||
...
|
||||
});
|
||||
|
||||
test('The campers landing page figure has the correct image', async () => {
|
||||
...
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## How to Run Tests
|
||||
|
||||
### 1. Ensure that MongoDB and Client Applications are Running
|
||||
|
||||
- [Start MongoDB and seed the database](how-to-setup-freecodecamp-locally.md#step-3-start-mongodb-and-seed-the-database)
|
||||
- [Start MongoDB and seed the database](how-to-setup-**freecodecamp**-locally.md#step-3-start-mongodb-and-seed-the-database)
|
||||
|
||||
- [Start the freeCodeCamp client application and API server](how-to-setup-freecodecamp-locally.md#step-4-start-the-freecodecamp-client-application-and-api-server)
|
||||
|
||||
@@ -35,6 +169,7 @@ To learn how to write Playwright tests, or 'specs', please see Playwright's offi
|
||||
To run tests with Playwright check the following below
|
||||
|
||||
- Make sure you navigate to the e2e repo first
|
||||
|
||||
```console
|
||||
cd e2e
|
||||
```
|
||||
@@ -64,6 +199,7 @@ To run tests with Playwright check the following below
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```console
|
||||
npx playwright test tests/todo-page/ tests/landing-page/
|
||||
```
|
||||
@@ -75,6 +211,7 @@ To run tests with Playwright check the following below
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```console
|
||||
npx playwright test -g "add a todo item"
|
||||
```
|
||||
@@ -139,13 +276,12 @@ Playwright is generally a solid bullet-proof tool. The contributor has already c
|
||||
```console
|
||||
Protocol error (Network.getResponseBody): Request content was evicted from inspector cache
|
||||
```
|
||||
|
||||
1. The network request was made using a method that does not include a response body, such as HEAD or CONNECT.
|
||||
2. The network request was made over a secure (HTTPS) connection, and the response body is not available for security reasons.
|
||||
3. The network request was made by a third-party resource (such as an advertisement or a tracking pixel) that is not controlled by the script.
|
||||
4. The network request was made by a script that has been paused or stopped before the response was received.
|
||||
|
||||
|
||||
|
||||
**For more insights on issues visit the official documentation.**
|
||||
|
||||
## Playwright-Gitpod Setup
|
||||
@@ -157,21 +293,25 @@ If starting the Gitpod environment did not automatically develop the environment
|
||||
- Follow the [MongoDB installation guide](https://www.mongodb.com/basics/get-started).
|
||||
|
||||
- Create the .env
|
||||
|
||||
```console
|
||||
cp sample.env .env
|
||||
```
|
||||
|
||||
- Create a config file.
|
||||
|
||||
```console
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Seed the database
|
||||
|
||||
```console
|
||||
pnpm run seed
|
||||
```
|
||||
|
||||
- Develop the server and client
|
||||
|
||||
```console
|
||||
pnpm run develop
|
||||
```
|
||||
@@ -184,7 +324,6 @@ To install necessary dependencies for running Playwright run the following comma
|
||||
pnpm run playwright:install-build-tools
|
||||
```
|
||||
|
||||
|
||||
### 3. Run the Playwright Tests on Gitpod
|
||||
|
||||
To run all Playwright tests, run the following command:
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# How to add Playwright tests
|
||||
|
||||
## Installation:
|
||||
## Installation
|
||||
|
||||
To install Playwright run:
|
||||
|
||||
@@ -14,19 +14,153 @@ To install and configure Playwright on your machine check out this [documentatio
|
||||
|
||||
To learn how to write Playwright tests, or 'specs', please see Playwright's official [documentation](https://playwright.dev/docs/writing-tests).
|
||||
|
||||
|
||||
## Where to Add a Test
|
||||
|
||||
- Playwright tests are in the `./e2e` directory.
|
||||
|
||||
- Playwright test files are always with a `.spec.ts` extension.
|
||||
|
||||
## How to Run Tests
|
||||
## Best Practices for writing e2e tests
|
||||
|
||||
This section will explain in detail about best practices for writing and documenting E2E tests based on playwright documentation and our community code-style.
|
||||
|
||||
### - Identifying a DOM element
|
||||
|
||||
Always use the `data-playwright-test-label` attribute to identify DOM elements. This attribute is used to identify elements in the DOM for testing with playwright only. It is not used for styling or any other purpose.
|
||||
|
||||
For example:
|
||||
|
||||
```html
|
||||
<div data-playwright-test-label="landing-page-figure">
|
||||
<img src="..." alt="..." />
|
||||
</div>
|
||||
```
|
||||
|
||||
Make sure you use the getByTestId method to identify the element in the test file.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
const landingPageFigure = page.getByTestId('landing-page-figure');
|
||||
```
|
||||
|
||||
### - Imports
|
||||
|
||||
Always start with necessary imports at the beginning of the file.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
import { test, expect, type Page } from '@playwright/test';
|
||||
```
|
||||
|
||||
### - Constants
|
||||
|
||||
Define any constant elements, data sets, or configurations used throughout your tests for easy reference.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
const landingPageElements = { ... };
|
||||
const superBlocks = [ ... ];
|
||||
```
|
||||
|
||||
### - Shared Context
|
||||
|
||||
If tests depend on a shared context (like a loaded web page), use beforeAll and afterAll hooks to set up and tear down that context.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
let page: Page;
|
||||
|
||||
beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage();
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
await page.close();
|
||||
});
|
||||
```
|
||||
|
||||
### - Descriptive test names
|
||||
|
||||
Each test block should have a clear and concise name describing exactly what it's testing.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
test('The component landing-top renders correctly', async ({ page }) => {
|
||||
...
|
||||
});
|
||||
```
|
||||
|
||||
### - Human readable assertions
|
||||
|
||||
Each assertion should be as human readable as possible. This makes it easier to understand what the test is doing and what it's expecting.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
await expect(landingHeading1).toHaveText('Learn to code — for free.');
|
||||
```
|
||||
|
||||
### - Keep it DRY
|
||||
|
||||
Make sure that the tests are not repeating the same code over and over again. If you find yourself repeating the same code, consider refactoring it as a loop or a function.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
for (const logo of await logos.all()) {
|
||||
await expect(logo).toBeVisible();
|
||||
}
|
||||
```
|
||||
|
||||
### - Tests for mobile screens
|
||||
|
||||
Use the 'isMobile' argument to run tests that incude logic that varies for mobile screens.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({isMobile}) =>
|
||||
{
|
||||
const landingPageImage = page.getByTestId('landing-page-figure');
|
||||
|
||||
if (isMobile) {
|
||||
await expect(landingPageImage).toBeHidden();
|
||||
} else {
|
||||
await expect(landingPageImage).toBeVisible();
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### - Group related tests
|
||||
|
||||
Group related tests together using describe blocks. This makes it easier to understand what the tests are doing and what they're testing.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
describe('The campers landing page', () => {
|
||||
test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({isMobile}) =>
|
||||
{
|
||||
...
|
||||
});
|
||||
|
||||
test('The campers landing page figure has the correct image', async () => {
|
||||
...
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## How to Run Tests
|
||||
|
||||
### 1. Ensure that MongoDB and Client Applications are Running
|
||||
|
||||
- [Start MongoDB and seed the database](how-to-setup-freecodecamp-locally.md#step-3-start-mongodb-and-seed-the-database)
|
||||
- [Start MongoDB and seed the database](how-to-setup-**freecodecamp**-locally.md#step-3-start-mongodb-and-seed-the-database)
|
||||
|
||||
- [Start the freeCodeCamp client application and API server](how-to-setup-freecodecamp-locally.md#step-4-start-the-freecodecamp-client-application-and-api-server)
|
||||
|
||||
@@ -35,6 +169,7 @@ To learn how to write Playwright tests, or 'specs', please see Playwright's offi
|
||||
To run tests with Playwright check the following below
|
||||
|
||||
- Make sure you navigate to the e2e repo first
|
||||
|
||||
```console
|
||||
cd e2e
|
||||
```
|
||||
@@ -64,6 +199,7 @@ To run tests with Playwright check the following below
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```console
|
||||
npx playwright test tests/todo-page/ tests/landing-page/
|
||||
```
|
||||
@@ -75,6 +211,7 @@ To run tests with Playwright check the following below
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```console
|
||||
npx playwright test -g "add a todo item"
|
||||
```
|
||||
@@ -139,13 +276,12 @@ Playwright is generally a solid bullet-proof tool. The contributor has already c
|
||||
```console
|
||||
Protocol error (Network.getResponseBody): Request content was evicted from inspector cache
|
||||
```
|
||||
|
||||
1. The network request was made using a method that does not include a response body, such as HEAD or CONNECT.
|
||||
2. The network request was made over a secure (HTTPS) connection, and the response body is not available for security reasons.
|
||||
3. The network request was made by a third-party resource (such as an advertisement or a tracking pixel) that is not controlled by the script.
|
||||
4. The network request was made by a script that has been paused or stopped before the response was received.
|
||||
|
||||
|
||||
|
||||
**For more insights on issues visit the official documentation.**
|
||||
|
||||
## Playwright-Gitpod Setup
|
||||
@@ -157,21 +293,25 @@ If starting the Gitpod environment did not automatically develop the environment
|
||||
- Follow the [MongoDB installation guide](https://www.mongodb.com/basics/get-started).
|
||||
|
||||
- Create the .env
|
||||
|
||||
```console
|
||||
cp sample.env .env
|
||||
```
|
||||
|
||||
- Create a config file.
|
||||
|
||||
```console
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Seed the database
|
||||
|
||||
```console
|
||||
pnpm run seed
|
||||
```
|
||||
|
||||
- Develop the server and client
|
||||
|
||||
```console
|
||||
pnpm run develop
|
||||
```
|
||||
@@ -184,7 +324,6 @@ To install necessary dependencies for running Playwright run the following comma
|
||||
pnpm run playwright:install-build-tools
|
||||
```
|
||||
|
||||
|
||||
### 3. Run the Playwright Tests on Gitpod
|
||||
|
||||
To run all Playwright tests, run the following command:
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# How to add Playwright tests
|
||||
|
||||
## Installation:
|
||||
## Installation
|
||||
|
||||
To install Playwright run:
|
||||
|
||||
@@ -14,19 +14,153 @@ To install and configure Playwright on your machine check out this [documentatio
|
||||
|
||||
To learn how to write Playwright tests, or 'specs', please see Playwright's official [documentation](https://playwright.dev/docs/writing-tests).
|
||||
|
||||
|
||||
## Where to Add a Test
|
||||
|
||||
- Playwright tests are in the `./e2e` directory.
|
||||
|
||||
- Playwright test files are always with a `.spec.ts` extension.
|
||||
|
||||
## How to Run Tests
|
||||
## Best Practices for writing e2e tests
|
||||
|
||||
This section will explain in detail about best practices for writing and documenting E2E tests based on playwright documentation and our community code-style.
|
||||
|
||||
### - Identifying a DOM element
|
||||
|
||||
Always use the `data-playwright-test-label` attribute to identify DOM elements. This attribute is used to identify elements in the DOM for testing with playwright only. It is not used for styling or any other purpose.
|
||||
|
||||
For example:
|
||||
|
||||
```html
|
||||
<div data-playwright-test-label="landing-page-figure">
|
||||
<img src="..." alt="..." />
|
||||
</div>
|
||||
```
|
||||
|
||||
Make sure you use the getByTestId method to identify the element in the test file.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
const landingPageFigure = page.getByTestId('landing-page-figure');
|
||||
```
|
||||
|
||||
### - Imports
|
||||
|
||||
Always start with necessary imports at the beginning of the file.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
import { test, expect, type Page } from '@playwright/test';
|
||||
```
|
||||
|
||||
### - Constants
|
||||
|
||||
Define any constant elements, data sets, or configurations used throughout your tests for easy reference.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
const landingPageElements = { ... };
|
||||
const superBlocks = [ ... ];
|
||||
```
|
||||
|
||||
### - Shared Context
|
||||
|
||||
If tests depend on a shared context (like a loaded web page), use beforeAll and afterAll hooks to set up and tear down that context.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
let page: Page;
|
||||
|
||||
beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage();
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
await page.close();
|
||||
});
|
||||
```
|
||||
|
||||
### - Descriptive test names
|
||||
|
||||
Each test block should have a clear and concise name describing exactly what it's testing.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
test('The component landing-top renders correctly', async ({ page }) => {
|
||||
...
|
||||
});
|
||||
```
|
||||
|
||||
### - Human readable assertions
|
||||
|
||||
Each assertion should be as human readable as possible. This makes it easier to understand what the test is doing and what it's expecting.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
await expect(landingHeading1).toHaveText('Learn to code — for free.');
|
||||
```
|
||||
|
||||
### - Keep it DRY
|
||||
|
||||
Make sure that the tests are not repeating the same code over and over again. If you find yourself repeating the same code, consider refactoring it as a loop or a function.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
for (const logo of await logos.all()) {
|
||||
await expect(logo).toBeVisible();
|
||||
}
|
||||
```
|
||||
|
||||
### - Tests for mobile screens
|
||||
|
||||
Use the 'isMobile' argument to run tests that incude logic that varies for mobile screens.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({isMobile}) =>
|
||||
{
|
||||
const landingPageImage = page.getByTestId('landing-page-figure');
|
||||
|
||||
if (isMobile) {
|
||||
await expect(landingPageImage).toBeHidden();
|
||||
} else {
|
||||
await expect(landingPageImage).toBeVisible();
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### - Group related tests
|
||||
|
||||
Group related tests together using describe blocks. This makes it easier to understand what the tests are doing and what they're testing.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
describe('The campers landing page', () => {
|
||||
test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({isMobile}) =>
|
||||
{
|
||||
...
|
||||
});
|
||||
|
||||
test('The campers landing page figure has the correct image', async () => {
|
||||
...
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## How to Run Tests
|
||||
|
||||
### 1. Ensure that MongoDB and Client Applications are Running
|
||||
|
||||
- [Start MongoDB and seed the database](how-to-setup-freecodecamp-locally.md#step-3-start-mongodb-and-seed-the-database)
|
||||
- [Start MongoDB and seed the database](how-to-setup-**freecodecamp**-locally.md#step-3-start-mongodb-and-seed-the-database)
|
||||
|
||||
- [Start the freeCodeCamp client application and API server](how-to-setup-freecodecamp-locally.md#step-4-start-the-freecodecamp-client-application-and-api-server)
|
||||
|
||||
@@ -35,6 +169,7 @@ To learn how to write Playwright tests, or 'specs', please see Playwright's offi
|
||||
To run tests with Playwright check the following below
|
||||
|
||||
- Make sure you navigate to the e2e repo first
|
||||
|
||||
```console
|
||||
cd e2e
|
||||
```
|
||||
@@ -64,6 +199,7 @@ To run tests with Playwright check the following below
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```console
|
||||
npx playwright test tests/todo-page/ tests/landing-page/
|
||||
```
|
||||
@@ -75,6 +211,7 @@ To run tests with Playwright check the following below
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```console
|
||||
npx playwright test -g "add a todo item"
|
||||
```
|
||||
@@ -139,13 +276,12 @@ Playwright is generally a solid bullet-proof tool. The contributor has already c
|
||||
```console
|
||||
Protocol error (Network.getResponseBody): Request content was evicted from inspector cache
|
||||
```
|
||||
|
||||
1. The network request was made using a method that does not include a response body, such as HEAD or CONNECT.
|
||||
2. The network request was made over a secure (HTTPS) connection, and the response body is not available for security reasons.
|
||||
3. The network request was made by a third-party resource (such as an advertisement or a tracking pixel) that is not controlled by the script.
|
||||
4. The network request was made by a script that has been paused or stopped before the response was received.
|
||||
|
||||
|
||||
|
||||
**For more insights on issues visit the official documentation.**
|
||||
|
||||
## Playwright-Gitpod Setup
|
||||
@@ -157,21 +293,25 @@ If starting the Gitpod environment did not automatically develop the environment
|
||||
- Follow the [MongoDB installation guide](https://www.mongodb.com/basics/get-started).
|
||||
|
||||
- Create the .env
|
||||
|
||||
```console
|
||||
cp sample.env .env
|
||||
```
|
||||
|
||||
- Create a config file.
|
||||
|
||||
```console
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Seed the database
|
||||
|
||||
```console
|
||||
pnpm run seed
|
||||
```
|
||||
|
||||
- Develop the server and client
|
||||
|
||||
```console
|
||||
pnpm run develop
|
||||
```
|
||||
@@ -184,7 +324,6 @@ To install necessary dependencies for running Playwright run the following comma
|
||||
pnpm run playwright:install-build-tools
|
||||
```
|
||||
|
||||
|
||||
### 3. Run the Playwright Tests on Gitpod
|
||||
|
||||
To run all Playwright tests, run the following command:
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# How to add Playwright tests
|
||||
|
||||
## Installation:
|
||||
## Installation
|
||||
|
||||
To install Playwright run:
|
||||
|
||||
@@ -14,19 +14,153 @@ To install and configure Playwright on your machine check out this [documentatio
|
||||
|
||||
To learn how to write Playwright tests, or 'specs', please see Playwright's official [documentation](https://playwright.dev/docs/writing-tests).
|
||||
|
||||
|
||||
## Where to Add a Test
|
||||
|
||||
- Playwright tests are in the `./e2e` directory.
|
||||
|
||||
- Playwright test files are always with a `.spec.ts` extension.
|
||||
|
||||
## How to Run Tests
|
||||
## Best Practices for writing e2e tests
|
||||
|
||||
This section will explain in detail about best practices for writing and documenting E2E tests based on playwright documentation and our community code-style.
|
||||
|
||||
### - Identifying a DOM element
|
||||
|
||||
Always use the `data-playwright-test-label` attribute to identify DOM elements. This attribute is used to identify elements in the DOM for testing with playwright only. It is not used for styling or any other purpose.
|
||||
|
||||
For example:
|
||||
|
||||
```html
|
||||
<div data-playwright-test-label="landing-page-figure">
|
||||
<img src="..." alt="..." />
|
||||
</div>
|
||||
```
|
||||
|
||||
Make sure you use the getByTestId method to identify the element in the test file.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
const landingPageFigure = page.getByTestId('landing-page-figure');
|
||||
```
|
||||
|
||||
### - Imports
|
||||
|
||||
Always start with necessary imports at the beginning of the file.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
import { test, expect, type Page } from '@playwright/test';
|
||||
```
|
||||
|
||||
### - Constants
|
||||
|
||||
Define any constant elements, data sets, or configurations used throughout your tests for easy reference.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
const landingPageElements = { ... };
|
||||
const superBlocks = [ ... ];
|
||||
```
|
||||
|
||||
### - Shared Context
|
||||
|
||||
If tests depend on a shared context (like a loaded web page), use beforeAll and afterAll hooks to set up and tear down that context.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
let page: Page;
|
||||
|
||||
beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage();
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
await page.close();
|
||||
});
|
||||
```
|
||||
|
||||
### - Descriptive test names
|
||||
|
||||
Each test block should have a clear and concise name describing exactly what it's testing.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
test('The component landing-top renders correctly', async ({ page }) => {
|
||||
...
|
||||
});
|
||||
```
|
||||
|
||||
### - Human readable assertions
|
||||
|
||||
Each assertion should be as human readable as possible. This makes it easier to understand what the test is doing and what it's expecting.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
await expect(landingHeading1).toHaveText('Learn to code — for free.');
|
||||
```
|
||||
|
||||
### - Keep it DRY
|
||||
|
||||
Make sure that the tests are not repeating the same code over and over again. If you find yourself repeating the same code, consider refactoring it as a loop or a function.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
for (const logo of await logos.all()) {
|
||||
await expect(logo).toBeVisible();
|
||||
}
|
||||
```
|
||||
|
||||
### - Tests for mobile screens
|
||||
|
||||
Use the 'isMobile' argument to run tests that incude logic that varies for mobile screens.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({isMobile}) =>
|
||||
{
|
||||
const landingPageImage = page.getByTestId('landing-page-figure');
|
||||
|
||||
if (isMobile) {
|
||||
await expect(landingPageImage).toBeHidden();
|
||||
} else {
|
||||
await expect(landingPageImage).toBeVisible();
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### - Group related tests
|
||||
|
||||
Group related tests together using describe blocks. This makes it easier to understand what the tests are doing and what they're testing.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
describe('The campers landing page', () => {
|
||||
test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({isMobile}) =>
|
||||
{
|
||||
...
|
||||
});
|
||||
|
||||
test('The campers landing page figure has the correct image', async () => {
|
||||
...
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## How to Run Tests
|
||||
|
||||
### 1. Ensure that MongoDB and Client Applications are Running
|
||||
|
||||
- [Start MongoDB and seed the database](how-to-setup-freecodecamp-locally.md#step-3-start-mongodb-and-seed-the-database)
|
||||
- [Start MongoDB and seed the database](how-to-setup-**freecodecamp**-locally.md#step-3-start-mongodb-and-seed-the-database)
|
||||
|
||||
- [Start the freeCodeCamp client application and API server](how-to-setup-freecodecamp-locally.md#step-4-start-the-freecodecamp-client-application-and-api-server)
|
||||
|
||||
@@ -35,6 +169,7 @@ To learn how to write Playwright tests, or 'specs', please see Playwright's offi
|
||||
To run tests with Playwright check the following below
|
||||
|
||||
- Make sure you navigate to the e2e repo first
|
||||
|
||||
```console
|
||||
cd e2e
|
||||
```
|
||||
@@ -64,6 +199,7 @@ To run tests with Playwright check the following below
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```console
|
||||
npx playwright test tests/todo-page/ tests/landing-page/
|
||||
```
|
||||
@@ -75,6 +211,7 @@ To run tests with Playwright check the following below
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```console
|
||||
npx playwright test -g "add a todo item"
|
||||
```
|
||||
@@ -139,13 +276,12 @@ Playwright is generally a solid bullet-proof tool. The contributor has already c
|
||||
```console
|
||||
Protocol error (Network.getResponseBody): Request content was evicted from inspector cache
|
||||
```
|
||||
|
||||
1. The network request was made using a method that does not include a response body, such as HEAD or CONNECT.
|
||||
2. The network request was made over a secure (HTTPS) connection, and the response body is not available for security reasons.
|
||||
3. The network request was made by a third-party resource (such as an advertisement or a tracking pixel) that is not controlled by the script.
|
||||
4. The network request was made by a script that has been paused or stopped before the response was received.
|
||||
|
||||
|
||||
|
||||
**For more insights on issues visit the official documentation.**
|
||||
|
||||
## Playwright-Gitpod Setup
|
||||
@@ -157,21 +293,25 @@ If starting the Gitpod environment did not automatically develop the environment
|
||||
- Follow the [MongoDB installation guide](https://www.mongodb.com/basics/get-started).
|
||||
|
||||
- Create the .env
|
||||
|
||||
```console
|
||||
cp sample.env .env
|
||||
```
|
||||
|
||||
- Create a config file.
|
||||
|
||||
```console
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Seed the database
|
||||
|
||||
```console
|
||||
pnpm run seed
|
||||
```
|
||||
|
||||
- Develop the server and client
|
||||
|
||||
```console
|
||||
pnpm run develop
|
||||
```
|
||||
@@ -184,7 +324,6 @@ To install necessary dependencies for running Playwright run the following comma
|
||||
pnpm run playwright:install-build-tools
|
||||
```
|
||||
|
||||
|
||||
### 3. Run the Playwright Tests on Gitpod
|
||||
|
||||
To run all Playwright tests, run the following command:
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Como adicionar testes do Playwright
|
||||
|
||||
## Instalação:
|
||||
## Instalação
|
||||
|
||||
Para instalar o Playwright, execute:
|
||||
|
||||
@@ -14,19 +14,153 @@ Para instalar e configurar o Playwright na sua máquina, confira a [documentaç
|
||||
|
||||
Para aprender a escrever testes do Playwright ou 'specs', confira a [documentação](https://playwright.dev/docs/writing-tests) oficial.
|
||||
|
||||
|
||||
## Onde adicionar um teste
|
||||
|
||||
- Os testes do Playwright estão no diretório `./e2e`.
|
||||
|
||||
- Os arquivos de teste do Playwright têm sempre uma extensão `.spec.ts`.
|
||||
|
||||
## Como executar testes
|
||||
## Melhores práticas para a escrita de testes e2e
|
||||
|
||||
Esta seção explicará em detalhes as melhores práticas para escrever e documentar testes E2E com base na documentação do playwright e no nosso estilo de código comunitário.
|
||||
|
||||
### - Identificando um elemento do DOM
|
||||
|
||||
Sempre use o atributo `data-playwright-test-label` para identificar elementos do DOM. Esse atributo é usado para identificar elementos no DOM para testes somente com o playwright. Ele não é usado para estilização ou para qualquer outra finalidade.
|
||||
|
||||
Por exemplo:
|
||||
|
||||
```html
|
||||
<div data-playwright-test-label="landing-page-figure">
|
||||
<img src="..." alt="..." />
|
||||
</div>
|
||||
```
|
||||
|
||||
Certifique-se de usar o método getByTestId para identificar o elemento no arquivo de teste.
|
||||
|
||||
Por exemplo:
|
||||
|
||||
```ts
|
||||
const landingPageFigure = page.getByTestId('landing-page-figure');
|
||||
```
|
||||
|
||||
### - Importações
|
||||
|
||||
Sempre comece com as importações necessárias no início do arquivo.
|
||||
|
||||
Por exemplo:
|
||||
|
||||
```ts
|
||||
import { test, expect, type Page } from '@playwright/test';
|
||||
```
|
||||
|
||||
### - Constantes
|
||||
|
||||
Defina quaisquer elementos constantes, conjuntos de dados ou configurações usadas durante seus testes para fácil referência.
|
||||
|
||||
Por exemplo:
|
||||
|
||||
```ts
|
||||
const landingPageElements = { ... };
|
||||
const superBlocks = [ ... ];
|
||||
```
|
||||
|
||||
### - Contexto compartilhado
|
||||
|
||||
Se os testes dependem de um contexto compartilhado (como uma página da web carregada), use os hooks beforeAll e afterAll para configurar e encerrar esse contexto.
|
||||
|
||||
Por exemplo:
|
||||
|
||||
```ts
|
||||
let page: Page;
|
||||
|
||||
beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage();
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
await page.close();
|
||||
});
|
||||
```
|
||||
|
||||
### - Nomes de testes descritivos
|
||||
|
||||
Cada bloco de teste deve ter um nome claro e conciso descrevendo exatamente o que ele está testando.
|
||||
|
||||
Por exemplo:
|
||||
|
||||
```ts
|
||||
test('The component landing-top renders correctly', async ({ page }) => {
|
||||
...
|
||||
});
|
||||
```
|
||||
|
||||
### - Declarações legíveis
|
||||
|
||||
Cada declaração deve ser o mais legível possível. Isso torna mais fácil entender o que o teste está fazendo e o que está esperando.
|
||||
|
||||
Por exemplo:
|
||||
|
||||
```ts
|
||||
await expect(landingHeading1).toHaveText('Learn to code — for free.');
|
||||
```
|
||||
|
||||
### - Evite repetições
|
||||
|
||||
Certifique-se de que os testes não estão repetindo o mesmo código várias vezes. Se você estiver repetindo o mesmo código, considere refatorá-lo como um laço ou uma função.
|
||||
|
||||
Por exemplo:
|
||||
|
||||
```ts
|
||||
for (const logo of await logos.all()) {
|
||||
await expect(logo).toBeVisible();
|
||||
}
|
||||
```
|
||||
|
||||
### - Testes para telas de dispositivos móveis
|
||||
|
||||
Use o argumento 'isMobile' para executar testes que influenciam a lógica que varia para telas de dispositivos móveis.
|
||||
|
||||
Por exemplo:
|
||||
|
||||
```ts
|
||||
test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({isMobile}) =>
|
||||
{
|
||||
const landingPageImage = page.getByTestId('landing-page-figure');
|
||||
|
||||
if (isMobile) {
|
||||
await expect(landingPageImage).toBeHidden();
|
||||
} else {
|
||||
await expect(landingPageImage).toBeVisible();
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### - Agrupamento de testes relacionados
|
||||
|
||||
Agrupe testes relacionados em conjunto usando blocos "descrite". Isso torna mais fácil entender o que os testes estão fazendo e o que estão testando.
|
||||
|
||||
Por exemplo:
|
||||
|
||||
```ts
|
||||
describe('The campers landing page', () => {
|
||||
test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({isMobile}) =>
|
||||
{
|
||||
...
|
||||
});
|
||||
|
||||
test('The campers landing page figure has the correct image', async () => {
|
||||
...
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## Como executar testes
|
||||
|
||||
### 1. Veja se as aplicações de client e do MongoDB estão em execução
|
||||
|
||||
- [Inicie o MongoDB e crie o banco de dados](how-to-setup-freecodecamp-locally.md#step-3-start-mongodb-and-seed-the-database)
|
||||
- [Inicie o MongoDB e crie o banco de dados](how-to-setup-**freecodecamp**-locally.md#step-3-start-mongodb-and-seed-the-database)
|
||||
|
||||
- [Inicie também a aplicação de client do freeCodeCamp e o servidor da API](how-to-setup-freecodecamp-locally.md#step-4-start-the-freecodecamp-client-application-and-api-server)
|
||||
|
||||
@@ -35,6 +169,7 @@ Para aprender a escrever testes do Playwright ou 'specs', confira a [documentaç
|
||||
Para executar testes com o Playwright, verifique o seguinte
|
||||
|
||||
- Não se esqueça de navegar primeiro para o repositório e2e
|
||||
|
||||
```console
|
||||
cd e2e
|
||||
```
|
||||
@@ -64,6 +199,7 @@ Para executar testes com o Playwright, verifique o seguinte
|
||||
```
|
||||
|
||||
Por exemplo:
|
||||
|
||||
```console
|
||||
npx playwright test tests/todo-page/ tests/landing-page/
|
||||
```
|
||||
@@ -75,6 +211,7 @@ Para executar testes com o Playwright, verifique o seguinte
|
||||
```
|
||||
|
||||
Por exemplo:
|
||||
|
||||
```console
|
||||
npx playwright test -g "add a todo item"
|
||||
```
|
||||
@@ -139,13 +276,12 @@ O Playwright, geralmente, é uma ferramenta com pouquíssimas chances de erro. O
|
||||
```console
|
||||
Protocol error (Network.getResponseBody): Request content was evicted from inspector cache
|
||||
```
|
||||
|
||||
1. A solicitação de rede foi feita usando um método que não inclui um corpo de resposta, como HEAD ou CONNECT.
|
||||
2. A solicitação de rede foi feita através de uma conexão segura (HTTPS) e o corpo da resposta não está disponível por razões de segurança.
|
||||
3. A solicitação de rede foi feita por um recurso de terceiros (como um anúncio ou um pixel de rastreamento) que não é controlado pelo script.
|
||||
4. A solicitação de rede foi feita por um script que foi pausado ou interrompido antes de a resposta ser recebida.
|
||||
|
||||
|
||||
|
||||
**Para mais informações sobre essas questões, confira a documentação oficial.**
|
||||
|
||||
## Configuração do Playwright no Gitpod
|
||||
@@ -157,21 +293,25 @@ Se, ao iniciar o ambiente do Gitpod, o ambiente não foi desenvolvido automatica
|
||||
- Siga o [guia de instalação do MongoDB](https://www.mongodb.com/basics/get-started).
|
||||
|
||||
- Criar o arquivo .env
|
||||
|
||||
```console
|
||||
cp sample.env .env
|
||||
```
|
||||
|
||||
- Crie um arquivo de configuração.
|
||||
|
||||
```console
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Crie o banco de dados
|
||||
|
||||
```console
|
||||
pnpm run seed
|
||||
```
|
||||
|
||||
- Desenvolva o servidor e o client
|
||||
|
||||
```console
|
||||
pnpm run develop
|
||||
```
|
||||
@@ -184,7 +324,6 @@ Para instalar as dependências necessárias para executar o Playwright, execute
|
||||
pnpm run playwright:install-build-tools
|
||||
```
|
||||
|
||||
|
||||
### 3. Execute os testes do Playwright no Gitpod
|
||||
|
||||
Para executar todos os testes do Playwright, execute o seguinte comando:
|
||||
|
||||
@@ -71,7 +71,7 @@ Observe que a chave `download_language` precisa ser definida como código do idi
|
||||
|
||||
Existem algumas etapas a serem seguidas para permitir que a base de código seja compilada no idioma desejado.
|
||||
|
||||
First, visit the [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts) file to add the language to the list of available languages and configure the values. Existem vários objetos aqui.
|
||||
Primeiro, visite o arquivo [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts) para adicionar o idioma à lista de idiomas disponíveis e configurar os valores. Existem vários objetos aqui.
|
||||
|
||||
- `Languages`: adiciona o novo idioma no enum `Languages`, do mesmo modo que com os outros. O valor da string aqui será usado no arquivo `.env` para definir o idioma da build posteriormente.
|
||||
- `availableLangs`: adiciona a nova propriedade do enum `Languages` aos dois arrays, `client` e `curriculum`.
|
||||
@@ -319,7 +319,7 @@ Quando estes arquivos estiverem no local certo, você deve poder usar `pnpm run
|
||||
|
||||
Quando seu PR anterior for mesclado e sua VM para seu idioma estiver pronta, faça outro PR para mostrar seu idioma no menu de navegação.
|
||||
|
||||
In [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts) file, you have included your language in `hiddenLangs` array in the prior PR. Retire-o do array agora.
|
||||
No arquivo [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts), você incluiu seu idioma no array `hiddenLangs` no PR anterior. Retire-o do array agora.
|
||||
|
||||
```js
|
||||
export const hiddenLangs = []; // Remove seu idioma do array
|
||||
|
||||
@@ -570,18 +570,18 @@ pnpm run update-challenge-order
|
||||
|
||||
Ele vai orientá-lo através de um processo interativo para selecionar a ordem dos desafios.
|
||||
|
||||
## Troubleshooting
|
||||
## Solução de problemas
|
||||
|
||||
### Infinite Loop Detected
|
||||
### Loop infinito detectado
|
||||
|
||||
If you see the following error in the console while previewing a challenge:
|
||||
Se você ver o seguinte erro no console ao pré-visualizar um desafio:
|
||||
|
||||
```text
|
||||
Potential infinite loop detected on line <number>...
|
||||
```
|
||||
|
||||
This means that the loop-protect plugin has found a long-running loop or recursive function. If your challenge needs to do that (e.g. it contains an event loop that is supposed to run indefinitely), then you can prevent the plugin from being used in the preview. To do so, add `disableLoopProtectPreview: true` to the block's `meta.json` file.
|
||||
Isso significa que o plug-in de proteção de loops encontrou um loop de longa duração ou uma função recursiva. Se o desafio precisar fazer isso (por exemplo, contém um loop de eventos que deve ser executado indefinidamente), então você pode impedir que o plug-in seja usado na visualização. Para fazer isso, adicione `disableLoopProtectPreview: true` ao arquivo `meta.json` do bloco.
|
||||
|
||||
If your tests are computationally intensive, then you may see this error when they run. If this happens then you can add `disableLoopProtectTests: true` to the block's `meta.json` file.
|
||||
Se os testes demandam muitos cálculos, você poderá ver esse erro quando eles forem executados. Se isso acontecer, adicione `disableLoopProtectPreview: true` ao arquivo `meta.json` do bloco.
|
||||
|
||||
It's not typically necessary to have both set to true, so only set them as needed.
|
||||
Normalmente, não é necessário ter os dois definidos como true, Defina-os, apenas, conforme necessário.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Як додати тести Playwright
|
||||
|
||||
## Встановлення:
|
||||
## Installation
|
||||
|
||||
Щоб встановити Playwright:
|
||||
|
||||
@@ -14,19 +14,153 @@ pnpm run playwright:install-build-tools
|
||||
|
||||
Щоб дізнатися, як писати тести Playwright, або «специфікації», зверніться до офіційної [документації Playwright](https://playwright.dev/docs/writing-tests).
|
||||
|
||||
|
||||
## Куди додати тест
|
||||
|
||||
- Тести Playwright знаходяться в каталозі `./e2e`.
|
||||
|
||||
- Файли тестів Playwright завжди мають розширення `.spec.ts`.
|
||||
|
||||
## Як проводити тести
|
||||
## Best Practices for writing e2e tests
|
||||
|
||||
This section will explain in detail about best practices for writing and documenting E2E tests based on playwright documentation and our community code-style.
|
||||
|
||||
### - Identifying a DOM element
|
||||
|
||||
Always use the `data-playwright-test-label` attribute to identify DOM elements. This attribute is used to identify elements in the DOM for testing with playwright only. It is not used for styling or any other purpose.
|
||||
|
||||
Наприклад:
|
||||
|
||||
```html
|
||||
<div data-playwright-test-label="landing-page-figure">
|
||||
<img src="..." alt="..." />
|
||||
</div>
|
||||
```
|
||||
|
||||
Make sure you use the getByTestId method to identify the element in the test file.
|
||||
|
||||
Наприклад:
|
||||
|
||||
```ts
|
||||
const landingPageFigure = page.getByTestId('landing-page-figure');
|
||||
```
|
||||
|
||||
### - Imports
|
||||
|
||||
Always start with necessary imports at the beginning of the file.
|
||||
|
||||
Наприклад:
|
||||
|
||||
```ts
|
||||
import { test, expect, type Page } from '@playwright/test';
|
||||
```
|
||||
|
||||
### - Constants
|
||||
|
||||
Define any constant elements, data sets, or configurations used throughout your tests for easy reference.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
const landingPageElements = { ... };
|
||||
const superBlocks = [ ... ];
|
||||
```
|
||||
|
||||
### - Shared Context
|
||||
|
||||
If tests depend on a shared context (like a loaded web page), use beforeAll and afterAll hooks to set up and tear down that context.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
let page: Page;
|
||||
|
||||
beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage();
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
await page.close();
|
||||
});
|
||||
```
|
||||
|
||||
### - Descriptive test names
|
||||
|
||||
Each test block should have a clear and concise name describing exactly what it's testing.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
test('The component landing-top renders correctly', async ({ page }) => {
|
||||
...
|
||||
});
|
||||
```
|
||||
|
||||
### - Human readable assertions
|
||||
|
||||
Each assertion should be as human readable as possible. This makes it easier to understand what the test is doing and what it's expecting.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
await expect(landingHeading1).toHaveText('Learn to code — for free.');
|
||||
```
|
||||
|
||||
### - Keep it DRY
|
||||
|
||||
Make sure that the tests are not repeating the same code over and over again. If you find yourself repeating the same code, consider refactoring it as a loop or a function.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
for (const logo of await logos.all()) {
|
||||
await expect(logo).toBeVisible();
|
||||
}
|
||||
```
|
||||
|
||||
### - Tests for mobile screens
|
||||
|
||||
Use the 'isMobile' argument to run tests that incude logic that varies for mobile screens.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({isMobile}) =>
|
||||
{
|
||||
const landingPageImage = page.getByTestId('landing-page-figure');
|
||||
|
||||
if (isMobile) {
|
||||
await expect(landingPageImage).toBeHidden();
|
||||
} else {
|
||||
await expect(landingPageImage).toBeVisible();
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### - Group related tests
|
||||
|
||||
Group related tests together using describe blocks. This makes it easier to understand what the tests are doing and what they're testing.
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
describe('The campers landing page', () => {
|
||||
test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({isMobile}) =>
|
||||
{
|
||||
...
|
||||
});
|
||||
|
||||
test('The campers landing page figure has the correct image', async () => {
|
||||
...
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## Як проводити тести
|
||||
|
||||
### 1. Переконайтеся, що MongoDB і клієнтські програми запущені
|
||||
|
||||
- [Запустіть MongoDB і заповнiть базу даних](how-to-setup-freecodecamp-locally.md#step-3-start-mongodb-and-seed-the-database)
|
||||
- [Запустіть MongoDB і заповнiть базу даних](how-to-setup-**freecodecamp**-locally.md#step-3-start-mongodb-and-seed-the-database)
|
||||
|
||||
- [Запустіть клієнтський застосунок freeCodeCamp і сервер API](how-to-setup-freecodecamp-locally.md#step-4-start-the-freecodecamp-client-application-and-api-server)
|
||||
|
||||
@@ -35,6 +169,7 @@ pnpm run playwright:install-build-tools
|
||||
Щоб запустити тести Playwright, зверніть увагу на інформацію нижче
|
||||
|
||||
- Переконайтесь, що перейшли до репозиторію e2e:
|
||||
|
||||
```console
|
||||
cd e2e
|
||||
```
|
||||
@@ -51,7 +186,7 @@ pnpm run playwright:install-build-tools
|
||||
npx playwright test <filename>
|
||||
```
|
||||
|
||||
Наприклад:
|
||||
For example:
|
||||
|
||||
```console
|
||||
npx playwright test landing-page.spec.ts
|
||||
@@ -63,7 +198,8 @@ pnpm run playwright:install-build-tools
|
||||
npx playwright test <pathToFolder1> <pathToFolder2>
|
||||
```
|
||||
|
||||
Наприклад:
|
||||
For example:
|
||||
|
||||
```console
|
||||
npx playwright test tests/todo-page/ tests/landing-page/
|
||||
```
|
||||
@@ -74,7 +210,8 @@ pnpm run playwright:install-build-tools
|
||||
npx playwright test -g <title>
|
||||
```
|
||||
|
||||
Наприклад:
|
||||
For example:
|
||||
|
||||
```console
|
||||
npx playwright test -g "add a todo item"
|
||||
```
|
||||
@@ -139,13 +276,12 @@ Playwright, як правило, є інструментом з дуже мал
|
||||
```console
|
||||
Protocol error (Network.getResponseBody): Request content was evicted from inspector cache
|
||||
```
|
||||
|
||||
1. Мережевий запит було зроблено за допомогою методу, який не містить тіла відповіді (наприклад, HEAD або CONNECT).
|
||||
2. Мережевий запит було зроблено через безпечне з’єднання (HTTPS), а тіло відповіді недоступне з міркувань безпеки.
|
||||
3. Мережевий запит зроблено стороннім ресурсом (наприклад, рекламою чи пікселем відстеження), який не контролюється сценарієм.
|
||||
4. Мережевий запит було зроблено сценарієм, який було призупинено або зупинено до отримання відповіді.
|
||||
|
||||
|
||||
|
||||
**Для отримання додаткової інформації відвідайте офіційну документацію.**
|
||||
|
||||
## Налаштування Playwright-Gitpod
|
||||
@@ -157,21 +293,25 @@ Playwright, як правило, є інструментом з дуже мал
|
||||
- Дотримуйтесь [посібнику з налаштування MongoDB](https://www.mongodb.com/basics/get-started).
|
||||
|
||||
- Створіть .env
|
||||
|
||||
```console
|
||||
cp sample.env .env
|
||||
```
|
||||
|
||||
- Створіть конфігураційний файл.
|
||||
|
||||
```console
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Заповніть базу даних
|
||||
|
||||
```console
|
||||
pnpm run seed
|
||||
```
|
||||
|
||||
- Розробіть сервер та клієнта
|
||||
|
||||
```console
|
||||
pnpm run develop
|
||||
```
|
||||
@@ -184,7 +324,6 @@ Playwright, як правило, є інструментом з дуже мал
|
||||
pnpm run playwright:install-build-tools
|
||||
```
|
||||
|
||||
|
||||
### 3. Запустіть тести Playwright на Gitpod
|
||||
|
||||
Щоб запустити всі тести Playwright, виконайте цю команду:
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
|
||||
Щоб дозволити кодовій базі функціонувати на обраній вами мові, потрібно зробити декілька кроків.
|
||||
|
||||
First, visit the [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts) file to add the language to the list of available languages and configure the values. У ньому розміщено декілька об’єктів.
|
||||
Спочатку відвідайте файл [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts), щоб додати мову до списку доступних мов та налаштувати значення. У ньому розміщено декілька об’єктів.
|
||||
|
||||
- `Languages`: додайте нову мову до запису `Languages`, схоже до інших. Значення рядка пізніше буде використане у файлі `.env`, щоб налаштувати збірку мови.
|
||||
- `availableLangs`: додайте нову властивість із запису `Languages` до масивів `client` та `curriculum`.
|
||||
@@ -319,7 +319,7 @@ videoLocaleIds: Joi.when('challengeType', {
|
||||
|
||||
Як тільки попередній PR буде об’єднаний, а VM для вашої мови буде готовою, створіть ще один PR, щоб додати нову мову до навігаційного меню.
|
||||
|
||||
In [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts) file, you have included your language in `hiddenLangs` array in the prior PR. Тепер видаліть її з масиву.
|
||||
У файлі [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts) ви додали мову до масиву `hiddenLangs` у попередньому PR. Тепер видаліть її з масиву.
|
||||
|
||||
```js
|
||||
export const hiddenLangs = []; // видаліть свою мову з масиву
|
||||
|
||||
Reference in New Issue
Block a user