Trying to utilize playwright setup and pre-authenticated users for running tests, encountered an issue where the storage file is set but not being utilized by playwright. Below are the codes used:
auth.setup.ts
import { test as setup, expect } from "@playwright/test";
import * as path from "path";
import fs from "fs";
import { loginAsAdmin } from "./utils";
const authFile = path.join(__dirname, "playwright", ".auth", "user.json");
console.log(`Auth file setup: ${authFile}`);
setup("Authenticate/Login", async ({ page }) => {
await loginAsAdmin(page); // login logic
await page.context().storageState({ path: authFile });
console.log(`Storage state saved to: ${authFile}`);
});
playwright.config.ts
import { defineConfig, devices } from "@playwright/test";
import dotenv from "dotenv";
import * as path from "path";
// check if the current directry is
const directory = path.join(__dirname, "tests");
const authFile = path.join(directory, "playwright", ".auth", "user.json");
/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
require("dotenv").config();
dotenv.config({
path: __dirname + "\\.env",
});
/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: "./tests",
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: "html",
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: "http://127.0.0.1:3000",
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: "on-first-retry",
},
/* Configure projects for major browsers */
projects: [
{ name: "setup", testMatch: /.*\.setup\.ts/ },
{
name: "chromium",
use: {
...devices["Desktop Chrome"],
storageState: authFile,
},
dependencies: ["setup"],
},
],
/* Run your local dev server before starting the tests */
webServer: {
command: "pnpm run dev",
url: "http://127.0.0.1:3000",
reuseExistingServer: !process.env.CI,
},
});
my test example:
await page.goto("http://localhost:3000/en/profile");
Upon visiting the profile page, it displays in an unauthenticated state despite the existence of the authfile and similar paths for setup and config files.