How do I manually run setup and cleanup tests in Playwright's UI mode?

Answer

Manually Running Setup and Cleanup Tests in Playwright's UI Mode

In Playwright's UI mode, setup and cleanup tests are not automatically executed. To manually run these tests, follow these steps:

1. Launch Playwright's UI mode by running the command:

   npx playwright test --ui

2. In the testing sidebar, locate and expand the test file containing your setup and cleanup tests.

3. Identify the beforeEach and afterEach blocks or any other setup and cleanup functions.

4. Manually run the setup tests by clicking the play button next to the corresponding beforeEach block or function.

5. Run your actual test cases by clicking the play button next to the desired test or describe block.

6. After completing the test cases, manually run the cleanup tests by clicking the play button next to the corresponding afterEach block or function.

Here's an example of a test file with setup and cleanup tests:

import { test } from '@playwright/test';

test.beforeEach(async ({ page }) => {
  await page.goto('https://ray.run/');
});

test.afterEach(async ({ page }) => {
  await page.close();
});

test('Sample Test', async ({ page }) => {
  await page.waitForSelector('h1');
  const title = await page.$eval('h1', (el) => el.textContent);
  expect(title).toBe('Ray.run');
});

Remember to manually run the beforeEach and afterEach blocks in the UI mode before and after executing the actual test cases. This ensures that your tests run as expected, even though Playwright's UI mode does not automatically respect setup and cleanup tests.