docs(testing): update testing instructions for debugging tests (#29800)

Adds more information to the testing documentation on how to execute
individual tests or pause execution.
This commit is contained in:
Brandy Carney
2024-08-26 12:17:36 -04:00
committed by GitHub
parent bacded500b
commit aa48963212

View File

@ -138,6 +138,70 @@ npm run test.e2e src/components/chip
npm run test.e2e src/components/chip -- --headed
```
### Debugging Tests
Playwright offers several ways to efficiently isolate and debug specific issues, helping to quickly identify and resolve problems within your test suite.
#### 1. Running Only Individual Tests
The `.only` suffix can be added to individual tests to limit execution to just those tests during debugging. If you add `.only` to a specific test, only that test will be executed, and all other tests in the test suite will be skipped.
**Example:**
```ts
test.only('should do something', async ({ page }) => {
// test code here
});
```
> [!IMPORTANT]
> After debugging, make sure to remove the `.only` suffix to ensure all tests run again during normal execution.
#### 2. Running Only a Test Suite
Similarly, you can focus on an entire test suite by adding `.only` to a `describe` block. This ensures that only the tests within that suite will be executed, while others will be skipped.
**Example:**
```ts
test.describe.only('group of tests', () => {
test('test 1', async ({ page }) => {
// test 1 code here
});
test('test 2', async ({ page }) => {
// test 2 code here
});
});
```
> [!IMPORTANT]
> After debugging, make sure to remove the `.only` suffix to ensure all tests run again during normal execution.
#### 3. Pausing Test Execution
Additionally, you can pause execution of a test by using the `page.pause()` method. This pauses the script execution and allows you to manually inspect the page in the browser.
**Example:**
```ts
const { test, expect } = require('@playwright/test');
test('example test', async ({ page }) => {
await page.goto('https://example.com');
// Pausing the page to inspect manually
await page.pause();
// Further actions will resume after unpausing
const title = await page.title();
expect(title).toBe('Example Domain');
});
```
> [!IMPORTANT]
> After debugging, make sure to remove the `page.pause()` call to restore normal test execution.
## Managing Screenshots
If you are running a test that takes a screenshot, you must first generate the reference screenshot from your reference branch. This is known as generating a "ground truth screenshot". All other screenshots will be compared to this ground truth.