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


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);

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.

Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.