tests: Ensure we wait for the page to be loaded

Gatsby is a bit crap for auto waiting, this will ensure we wait for the
page to be loaded before proceeding

.github/workflows/firebase-hosting-merge.yml

@@ -92,7 +92,6 @@ jobs:
           name: playwright-report-beta
           path: playwright-report/
 
-
   deploy:
     runs-on: ubuntu-latest
     needs:
@@ -134,4 +133,3 @@ jobs:
         with:
           name: playwright-report-live
           path: playwright-report/
-

playwright.config.ts

@@ -1,11 +1,13 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from "@playwright/test";
 
-const baseUrl =  process.env.PW_BASE_URL ? process.env.PW_BASE_URL : 'http://localhost:8002';
+const baseUrl = process.env.PW_BASE_URL
+  ? process.env.PW_BASE_URL
+  : "http://localhost:8002";
 const startWebserver = !process.env.PW_BASE_URL;
 
 export default defineConfig({
   // Look for test files in the "tests" directory, relative to this configuration file.
-  testDir: 'tests',
+  testDir: "tests",
 
   // Run all tests in parallel.
   fullyParallel: true,
@@ -16,40 +18,41 @@ export default defineConfig({
   // Increase timeout
   timeout: 5 * 60 * 1000,
 
-
   // Retry on CI only.
   retries: process.env.CI ? 5 : 0,
 
   // Opt out of parallel tests on CI.
   workers: process.env.CI ? 1 : undefined,
 
   // Reporter to use
-  reporter: 'html',
+  reporter: "html",
 
   use: {
     // Base URL to use in actions like `await page.goto('/')`.
     baseURL: baseUrl,
 
     // Collect trace when retrying the failed test.
-    trace: 'on-first-retry',
+    trace: "on-first-retry",
   },
   // Configure projects for major browsers.
   projects: [
     {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
     },
 
     {
-      name: 'chrome',
-      use: { ...devices['Desktop Chrome'] },
+      name: "chrome",
+      use: { ...devices["Desktop Chrome"] },
     },
   ],
   // Run your local dev server before starting the tests.
-  webServer: startWebserver ? {
-    command: 'npm run start -- --port 8002',
-    url: baseUrl,
-    reuseExistingServer: !process.env.CI,
-    timeout: 5 * 60 * 1000,
-  } : undefined,
-});
+  webServer: startWebserver
+    ? {
+        command: "npm run start -- --port 8002",
+        url: baseUrl,
+        reuseExistingServer: !process.env.CI,
+        timeout: 5 * 60 * 1000,
+      }
+    : undefined,
+});

src/pages/practices/engagement/we-deliver/teaching-with-4c.mdx

@@ -17,14 +17,14 @@ One fast way to make a workshop that is super engaging is with the 4C method.
 The 4C method is from ["Training from the Back of the Room!" by Sharon L. Bowman](https://www.amazon.co.uk/Training-Back-Room-Aside-Learn/dp/0787996629/ref=sr_1_1?crid=3CAASM0OM1NXY&dib=eyJ2IjoiMSJ9.Gtw-BQDMnn-xExmd4aS3JXvkRoiSO3wQ-eiIfNFOwkIPEE8sFORjmWVGH2U1Hpmp2hRvw4PNv_C23-hzwv_U0EH-bKxUn9F50_9owJwRIRYq0vhdx2hSE_K_g6m4i7xB0uA7QWTpJi_dbKAmDsdO9w0qiBsUD4-RrfiKR1w2BxJhpS4H2g2Gx607TOkxO9UbphuqTDRZcEKUo3uUR_XrM5DmRvVGV-8bqEROiib81EU.STMZFT7D4phgzBT7Fr8FWIh1j6dQk9yaJJhcJi4H7wM&dib_tag=se&keywords=Training+from+the+Back+of+the+Room!&nsdOptOutParam=true&qid=1727357526&sprefix=training+from+the+back+of+the+room+%2Caps%2C90&sr=8-1)
 
 The 4C's refer to a way to structure your workshops into short chunks that are:
-* **Connections:** Load whatever your participants know about this subject already into working term memory.
-* **Concepts:** Have your students learn the concepts they need for a new practice then teach each other what they learned
-* **Concrete:** Apply what you have learned to some concrete practice
-* **Conclusions:** Wrap up in such a way so the participants are thinking about where they will apply this technique.
 
+- **Connections:** Load whatever your participants know about this subject already into working term memory.
+- **Concepts:** Have your students learn the concepts they need for a new practice then teach each other what they learned
+- **Concrete:** Apply what you have learned to some concrete practice
+- **Conclusions:** Wrap up in such a way so the participants are thinking about where they will apply this technique.
 
 To make this easier you can use a grid like this
 
 ![Teaching with 4C](./teaching-with-4c.jpg)
 
-You create this by putting your topic in the top right, then underneath it come up with parts of that topic. Next for each of the parts come up with a connections exercise, concept exercise, concrete exercise, and conclusions. Keep each exercise between 10min and 20min.
+You create this by putting your topic in the top right, then underneath it come up with parts of that topic. Next for each of the parts come up with a connections exercise, concept exercise, concrete exercise, and conclusions. Keep each exercise between 10min and 20min.

src/pages/practices/xp-and-agility/we-measure-everything/use-experiments-to-introduce-change.mdx

@@ -8,7 +8,7 @@ color: "light-blue"
 icon: "arrow-path"
 ---
 
-export {default as default} from "../../../../components/post-layout";
+export { default as default } from "../../../../components/post-layout";
 
 # Use experiments to introduce change
 
@@ -26,4 +26,4 @@ Wrap it up with a [Experiment Retrospective](/practices/xp-and-agility/we-measur
 
 This method is powerful because "metrics trump vibes", it creates an artifact that can be shared with others, and it creates a forum to discuss how to do it safely.
 
-You can even do it if you're not personally in the team, so long as you check in regularly as to how it's going.
+You can even do it if you're not personally in the team, so long as you check in regularly as to how it's going.

src/styles/global.css

@@ -11,7 +11,6 @@ body,
   min-width: 100vw;
 }
 
-
 #gatsby-focus-wrapper {
   display: grid;
   grid-template-columns: 1fr;
@@ -21,4 +20,4 @@ body,
     "."
     "."
     ".";
-}
+}

tests/index.test.ts

@@ -4,6 +4,7 @@ import { test } from "@playwright/test";
 test.describe("index page", () => {
   test.beforeEach(async ({ page }) => {
     await page.goto("/");
+    await page.getByRole("navigation").waitFor();
   });
 
   test("it should have at least one page", async ({ page }) => {

tests/post.test.ts

@@ -4,6 +4,7 @@ import { test } from "@playwright/test";
 test.describe("post page", () => {
   test.beforeEach(async ({ page }) => {
     await page.goto("/");
+    await page.getByRole("navigation").waitFor();
     const locator = page.getByRole("main").getByRole("link").first();
     const headingText = await locator
       .getByRole("heading", { level: 3 })