fix tests

Author: filiphric

.github/workflows/playwright.yml

@@ -15,7 +15,7 @@ jobs:
     - name: Install Playwright Browsers
       run: npx playwright install --with-deps
     - name: Run Playwright tests
-      run: npx playwright test
+      run: npx playwright test --project replay-chromium
       env:
         BASE_URL: ${{ github.event.deployment_status.target_url }}
         REPLAY_API_KEY: ${{ secrets.REPLAY_API_KEY }}

playwright.config.ts

@@ -1,4 +1,4 @@
-import { PlaywrightTestConfig } from '@playwright/test'
+import { PlaywrightTestConfig, devices } from '@playwright/test'
 import { devices as replayDevices } from '@replayio/playwright'
 import dotenv from 'dotenv';
 dotenv.config();
@@ -22,6 +22,10 @@ const config: PlaywrightTestConfig = {
       name: 'replay-chromium',
       use: { ...(replayDevices['Replay Chromium'] as any) },
     },
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
   ],
 }
 export default config

src/components/Zoom.tsx

@@ -81,7 +81,7 @@ export const Zoom = ({ children }: {children: React.ReactNode}) => {
           onClick={closeWrapper}
         />
       ) : null}
-      <div data-testid="zoomed-out-player" style={styles} ref={containerRef} onClick={handleImageZoom}>
+      <div data-testid="image-with-zoom" style={styles} ref={containerRef} onClick={handleImageZoom}>
         {children}
       </div>
     </>

tests/navigation.spec.ts

@@ -4,14 +4,14 @@ test('navigation expanding works', async ({ page }) => {
 
   await page.goto('/')
   await page.getByText('Intro to time travel').click()
-  const navigationItem = page.getByText('What is time travel?', {exact: true})
+  const navigationItem = page.getByText('Why time travel?')
   await expect(navigationItem).toBeVisible()
 
 })
 
 test('navigation collapsing works', async ({ page }) => {
 
-  await page.goto('/time-travel-intro/what-is-time-travel')
+  await page.goto('/time-travel-intro/why-time-travel')
   // sidebar items are expanded
   const navigationItem = page.getByText('Annotate the timeline', {exact: true})
   await expect(navigationItem).toBeVisible()

tests/zoomPlayer.spec.ts

@@ -1,16 +1,18 @@
 import { test, expect } from '@playwright/test'
 
-test.skip('player zoom in', async ({ page }) => {
+test('player zoom in', async ({ page }) => {
 
   await page.goto('/test-runners/playwright/debugging-tests')
 
-  const playerZoomedOut = page.locator('[data-testid="zoomed-out-player"]').first() 
-  await playerZoomedOut.click()
+  const image = page.locator('[data-testid="image-with-zoom"]').first()
+  await image.scrollIntoViewIfNeeded() 
+  await image.click()
 
   const playerZoomedIn = page.locator('[data-testid="zoomed-in-player"]')
+  await playerZoomedIn.scrollIntoViewIfNeeded() 
   await expect(playerZoomedIn).toHaveCount(1)
 
-  playerZoomedIn.click()
+  await image.click()
   await expect(playerZoomedIn).toHaveCount(0)
 
 })