cherry-pick(#21008): docs: update auth docs to remove cross-run caching

docs/src/auth.md

@@ -9,7 +9,7 @@ Playwright executes tests in isolated environments called [browser contexts](./b
 
 Regardless of the authentication strategy you choose, you are likely to store authenticated browser state on the file system.
 
-We recommend to create `playwright/.auth` directory and add it to your `.gitignore`. You authentication routine will produce authenticated browser state and save it to a file in this `playwright/.auth` directory. Later on, tests will reuse this state and start already authenticated.
+We recommend to create `playwright/.auth` directory and add it to your `.gitignore`. Your authentication routine will produce authenticated browser state and save it to a file in this `playwright/.auth` directory. Later on, tests will reuse this state and start already authenticated.
 
 ```bash tab=bash-bash
 mkdir -p playwright/.auth
@@ -27,21 +27,6 @@ New-Item -ItemType Directory -Force -Path playwright\.auth
 Add-Content -path .gitignore "`r`nplaywright/.auth"
 ```
 
-Usually you would want to reuse authenticated state between multiple test runs, especially when authoring tests. All the examples in this guide authenticate lazily, and reuse auth state when possible. However, your app may require to re-authenticate after some amount of time. In this case, just remove `playwright/.auth` directory, and re-run your tests.
-
-```bash tab=bash-bash
-# Remove auth state
-rm -rf playwright/.auth
-```
-
-```batch tab=bash-batch
-rd /s /q playwright/.auth
-```
-
-```powershell tab=bash-powershell
-Remove-Item -Recurse -Force playwright/.auth
-```
-
 ## Basic: shared account in all tests
 * langs: js
 
@@ -61,16 +46,10 @@ Create `auth.setup.ts` that will prepare authenticated browser state for all oth
 ```js
 // auth.setup.ts
 import { test as setup } from '@playwright/test';
-import fs from 'fs';
-import path from 'path';
 
 const authFile = 'playwright/.auth/user.json';
 
 setup('authenticate', async ({ page }) => {
-  // Reuse authenticate from previous runs.
-  if (fs.existsSync(authFile))
-    return;
-
   // Perform authentication steps. Replace these actions with your own.
   await page.goto('https://github.com/login');
   await page.getByLabel('Username or email address').fill('username');
@@ -160,7 +139,7 @@ export const test = baseTest.extend<{}, { workerStorageState: string }>({
   workerStorageState: [async ({ browser }, use) => {
     // Use parallelIndex as a unique identifier for each worker.
     const id = test.info().parallelIndex;
-    const fileName = path.resolve(__dirname, `.auth/${id}.json`);
+    const fileName = path.resolve(test.info().project.outputDir, `.auth/${id}.json`);
 
     if (fs.existsSync(fileName)) {
       // Reuse existing authentication state if any.
@@ -327,17 +306,11 @@ In the [setup project](#basic-shared-account-in-all-tests):
 
 ```js
 // auth.setup.ts
-import { test } from '@playwright/test';
-import path from 'path';
-import fs from 'fs';
+import { test as setup } from '@playwright/test';
 
 const authFile = 'playwright/.auth/user.json';
 
-test('authenticate', async ({ request }) => {
-  // Reuse authenticate from previous runs.
-  if (fs.existsSync(authFile))
-    return;
-
+setup('authenticate', async ({ request }) => {
   // Send authentication request. Replace with your own.
   await request.post('https://github.com/login', {
     form: {
@@ -366,7 +339,7 @@ export const test = baseTest.extend<{}, { workerStorageState: string }>({
   workerStorageState: [async ({}, use) => {
     // Use parallelIndex as a unique identifier for each worker.
     const id = test.info().parallelIndex;
-    const fileName = path.resolve(__dirname, `.auth/${id}.json`);
+    const fileName = path.resolve(test.info().project.outputDir, `.auth/${id}.json`);
 
     if (fs.existsSync(fileName)) {
       // Reuse existing authentication state if any.
@@ -410,17 +383,11 @@ We will authenticate multiple times in the setup project.
 
 ```js
 // auth.setup.ts
-import { test } from '@playwright/test';
-import fs from 'fs';
-import path from 'path';
+import { test as setup } from '@playwright/test';
 
 const adminFile = 'playwright/.auth/admin.json';
 
-test('authenticate as admin', async ({ page }) => {
-  // Reuse authenticate from previous runs.
-  if (fs.existsSync(adminFile))
-    return;
-
+setup('authenticate as admin', async ({ page }) => {
   // Perform authentication steps. Replace these actions with your own.
   await page.goto('https://github.com/login');
   await page.getByLabel('Username or email address').fill('admin');
@@ -433,11 +400,7 @@ test('authenticate as admin', async ({ page }) => {
 
 const userFile = 'playwright/.auth/user.json';
 
-test('authenticate as user', async ({ page }) => {
-  // Reuse authenticate from previous runs.
-  if (fs.existsSync(userFile))
-    return;
-
+setup('authenticate as user', async ({ page }) => {
   // Perform authentication steps. Replace these actions with your own.
   await page.goto('https://github.com/login');
   await page.getByLabel('Username or email address').fill('user');