What is the purpose of the `auth.setup.ts` file in @playwright/test?

Answer

Understanding the Purpose of auth.setup.ts in @playwright/test

The auth.setup.ts file is used to perform authentication steps and store the resulting state for your tests. This allows you to authenticate once and reuse the stored state in multiple tests, making your test suite more efficient.

Here's a brief overview of how it works:

1. Replace the example authentication steps in auth.setup.ts with your own actions. For instance, navigate to your login page, fill out the username and password fields, and click the "Sign in" button.

await page.goto('https://ray.run/login');
await page.fill('input[name="username"]', 'your-username');
await page.fill('input[name="password"]', 'your-password');
await page.click('button[type="submit"]');

2. After completing the authentication steps, store the resulting state using page.context().storageState({ path: authFile }). This method takes an optional argument specifying where to store the state, such as 'playwright/.auth/user.json'.

const authFile = 'playwright/.auth/user.json';
await page.context().storageState({ path: authFile });

3. In your tests, specify the stored state as the storageState for the test or test suite. This allows you to reuse the authenticated state across multiple tests.

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

test.use({
  storageState: 'playwright/.auth/user.json',
});

test('authenticated test example', async ({ page }) => {
  await page.goto('https://ray.run/dashboard');
  // Your test logic here
});

Remember, you can specify different storageState for each test or test suite if you need to test multiple roles or scenarios.

By using auth.setup.ts and the stored state, you can efficiently manage authentication in your @playwright/test suite.