Fix failing test in webkit browser

.github/workflows/e2e.yml

@@ -9,17 +9,17 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: '14.x'
       - name: Install dependencies
         run: npm ci
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
       - name: Run Playwright tests
-        run: npx playwright test
-      - uses: actions/upload-artifact@v2
+        run: npm run test
+      - uses: actions/upload-artifact@v3
         if: always()
         with:
           name: playwright-report

.github/workflows/validate.yml

@@ -9,8 +9,8 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: '14.x'
       - name: Install dependencies

e2e/default.spec.ts

@@ -6,7 +6,8 @@ test.beforeEach(async ({ page }) => {
 
 test.describe('Basic test', () => {
   test('should show the title', async ({ page }) => {
-    const title = page.locator('title');
-    await expect(title).toHaveText('Reactjs Developer Community in Kenya');
+    await expect(
+      page.getByRole('heading', { name: 'React Developer Community Kenya' })
+    ).toBeVisible();
   });
 });

e2e/events.spec.ts

@@ -7,10 +7,14 @@ test.beforeEach(async ({ page }) => {
 test.describe('Test if see more link is clickable', () => {
   test('should navigate to the correct URL when See More is clicked', async ({
     page,
+    context,
+    browserName,
   }) => {
+    test.slow(browserName === 'webkit', 'This test times out on webkit');
     const [newPage] = await Promise.all([
-      page.waitForEvent('popup'),
-      page.locator('#events >> text="See More"').click(),
+      context.waitForEvent('page'),
+      page.waitForLoadState(),
+      page.getByRole('link', { name: 'See More' }).click(),
     ]);
     await expect(newPage).toHaveURL(
       'https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events'

package.json

@@ -19,7 +19,7 @@
     "react-dom": "18.1.0"
   },
   "devDependencies": {
-    "@playwright/test": "1.22.2",
+    "@playwright/test": "1.27.1",
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@types/react": "18.0.21",
     "@typescript-eslint/eslint-plugin": "^5.38.1",