Sample showing authentication with Playwright

Author: dpaquette

2wr-app/.gitignore

@@ -2,6 +2,7 @@
 node_modules
 /dist
 
+/tests/_storagestate
 
 # local env files
 .env

2wr-app/playwright.config.js

@@ -1,12 +1,29 @@
 // playwright.config.js
 // @ts-check
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
+
+if (
+  !process.env.TWO_WEEKS_READY_E2E_TEST_USERNAME ||
+  !process.env.TWO_WEEKS_READY_E2E_TEST_PASSWORD
+) {
+  console.error(
+    "TWO_WEEKS_READY_E2E_TEST_USERNAME and TWO_WEEKS_READY_E2E_TEST_PASSWORD environment variables must be set for end-to-end tests to run."
+  );
+  process.exit(-1);
+}
+
 const config = {
+  timeout: 120 * 1000,
+  webServer: {
+    command: "npm run serve",
+    port: 8080,
     timeout: 120 * 1000,
-    webServer: {
-        command: 'npm run serve',
-        port: 8080,
-        timeout: 120 * 1000,
-    },
+    reuseExistingServer: !process.env.CI
+  },
+  globalSetup: require.resolve("./tests/global-setup"),
+  use: {
+    // Tell all tests to load signed-in state from 'storageState.json'.
+    storageState: "./tests/_storagestate/storageState.json"
+  }
 };
-module.exports = config;
+module.exports = config;

2wr-app/src/components/welcome/welcome-landing.vue

@@ -41,13 +41,14 @@
     </v-row>
     <v-fab-transition>
       <v-btn
+        data-testid="welcome-next-button"
         color="green"
         dark
         absolute
         bottom
         right
         fab
-        class="mb-12"
+        class="mb-12 welcome-next-button"
         @click="next()"
         aria-label="Next"
       >
@@ -75,3 +76,8 @@ export default {
   },
 };
 </script>
+<style>
+  .v-btn--fab.welcome-next-button {
+    z-index: 10
+  }
+</style>

2wr-app/tests/global-setup.js

@@ -0,0 +1,40 @@
+// global-setup.js
+const { chromium, expect } = require("@playwright/test");
+
+module.exports = async () => {
+  const browser = await chromium.launch();
+  const page = await browser.newPage();
+  await page.goto("http://localhost:8080/");
+
+  // Save not signed-in state to 'newuser-storageState.json'.
+  await page
+    .context()
+    .storageState({ path: "./tests/_storagestate/newuser-storageState.json" });
+
+  await page.getByTestId("welcome-next-button").click();
+  await expect(
+    page.getByRole("heading", { name: "You and earthquake risk" })
+  ).toBeVisible();
+  await page.getByTestId("welcome-next-button").click();
+  await expect(
+    page.getByRole("heading", { name: "Let's get started!" })
+  ).toBeVisible();
+  await page.getByTestId("welcome-next-button").click();
+
+  await page
+    .getByLabel("Email address")
+    .fill(process.env.TWO_WEEKS_READY_E2E_TEST_USERNAME);
+  await page
+    .getByLabel("Password")
+    .fill(process.env.TWO_WEEKS_READY_E2E_TEST_PASSWORD);
+  await Promise.all([
+    page.waitForNavigation({ url: "http://localhost:8080/prepare" }),
+    page.locator('button[name="action"]').click()
+  ]);
+
+  // Save signed-in state to 'storageState.json'.
+  await page
+    .context()
+    .storageState({ path: "./tests/_storagestate/storageState.json" });
+  await browser.close();
+};

2wr-app/tests/hazard-info.spec.js

@@ -0,0 +1,26 @@
+import { expect, test } from "@playwright/test";
+
+test("Navigate to Hazard Info shows Earthquake Harzard info", async ({
+  page
+}) => {
+  await page.goto("http://localhost:8080/");
+
+  await page
+    .getByRole("link", {
+      name: "Learn Your Hazards Learn all about common hazards."
+    })
+    .click();
+
+  await page.getByText("Earthquake").click();
+  await page.getByRole("button", { name: "Before" }).click();
+  await expect(
+    page.getByText("Practice how to drop, cover, and hold on")
+  ).toBeVisible();
+  await page
+    .getByRole("banner")
+    .getByRole("button")
+    .click();
+  await expect(
+    page.getByText("Practice how to drop, cover, and hold on")
+  ).not.toBeVisible();
+});

2wr-app/tests/welcome.spec.js

@@ -1,6 +1,8 @@
 const { expect, test, chromium } = require("@playwright/test");
 const { injectAxe, checkA11y } = require("axe-playwright");
 
+test.use({ storageState: "./tests/_storagestate/newuser-storageState.json" });
+
 test.describe("Welcome page accessibility test", () => {
   let browser;
   let page;