How do I manage the page object lifecycle in Playwright Test?

Answer

Managing Page Object Lifecycle in @playwright/test

In @playwright/test, the page object doesn't close automatically at the end of each test. You need to manage the page object lifecycle manually using global setup or before/after hooks.

To reuse a single page object between multiple tests, use global setup. This allows you to log in once and skip the log-in step for all tests. Here's an example:

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

test.beforeAll(async ({ browser }) => {
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://ray.run/');
  // Log in or perform other setup tasks
});

test.afterAll(async ({ browser }) => {
  await browser.close();
});

test('Example test', async ({ page }) => {
  // Your test code here
});

You can also use before hooks to run a part of your test before each test, such as navigating to a specific URL or logging into a part of your app:

test.beforeEach(async ({ page }) => {
  await page.goto('https://ray.run/');
  // Log in or perform other setup tasks
});

test('Example test', async ({ page }) => {
  // Your test code here
});

It's crucial to keep each test isolated, running independently with its own local storage, session storage, data, and cookies. Test isolation improves reproducibility, simplifies debugging, and prevents cascading test failures. Use before and after hooks to avoid repetition for specific parts of your test while maintaining test isolation.