Fix/e2e tests (#1640)

* Use the saved ar locale file for playwright messages

* Use playwright.sh instead of CI to move the locale files

* Add snapshots

* Add snapshots

* Copy valid-locales from test folder in setup-node-env

* Copy all locale files from test folder in setup-node-env

* Try fixing the container not exiting

* Revert "Using wrong snapshots to fail tests"

This reverts commit 8233b8e

* Revert changes that are added in a different PR

* Try to speed up e2e tests

* Make all e2e tests run in parallel mode

* Apply code review suggestions

* Try failing a test

* Revert "Try failing a test"

This reverts commit f06cb9f.

bin/playwright.sh

@@ -1,4 +1,5 @@
 #! /usr/bin/env sh
+set -e
 
 version() {
   pnpm ls --depth=0 | grep -e playwright | awk '{print $2}';
@@ -11,6 +12,6 @@ export TEST_COMMAND=${TEST_COMMAND:-test:playwright:local}
 
 echo Running Playwright v$PLAYWRIGHT_VERSION as $USER_ID with Playwright arguments $PLAYWRIGHT_ARGS
 
-docker-compose -f docker-compose.playwright.yml up --build --force-recreate --abort-on-container-exit --exit-code-from playwright --remove-orphans
+docker-compose -f docker-compose.playwright.yml up --build --force-recreate --exit-code-from playwright --remove-orphans
 
 docker-compose -f docker-compose.playwright.yml down

test/playwright/e2e/all-results-keyboard.spec.ts

@@ -42,6 +42,8 @@ const locateFocusedResult = async (page: Page) => {
   return page.locator(`[href="${url.pathname}"]`)
 }
 
+test.describe.configure({ mode: 'parallel' })
+
 test.describe('all results grid keyboard accessibility test', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/search?q=birds')

test/playwright/e2e/attribution.spec.ts

@@ -1,5 +1,7 @@
 import { test, expect } from '@playwright/test'
 
+test.describe.configure({ mode: 'parallel' })
+
 test.beforeEach(async ({ context }) => {
   await context.grantPermissions(['clipboard-read', 'clipboard-write'])
 })

test/playwright/e2e/homepage.spec.ts

@@ -8,6 +8,8 @@ import {
 
 import { supportedSearchTypes } from '~/constants/media'
 
+test.describe.configure({ mode: 'parallel' })
+
 test.beforeEach(async ({ context }) => {
   await mockProviderApis(context)
 })

test/playwright/e2e/image-detail.spec.ts

@@ -13,6 +13,8 @@ const showsErrorPage = async (page: Page) => {
   )
 }
 
+test.describe.configure({ mode: 'parallel' })
+
 test.beforeEach(async ({ context }) => {
   await mockProviderApis(context)
 })

test/playwright/e2e/migration-banner.spec.ts

@@ -1,5 +1,7 @@
 import { test, expect } from '@playwright/test'
 
+test.describe.configure({ mode: 'parallel' })
+
 test.describe('migration banner', () => {
   test('shows migration banner on homepage', async ({ page }) => {
     await page.goto('/?referrer=creativecommons.org')

test/playwright/e2e/mobile-menu.spec.ts

@@ -15,6 +15,8 @@ const mobileFixture = {
 }
 test.use(mobileFixture)
 
+test.describe.configure({ mode: 'parallel' })
+
 test('Can open filters menu on mobile at least twice', async ({ page }) => {
   await page.goto('/search/?q=cat')
 

test/playwright/e2e/search-navigation.spec.ts

@@ -6,6 +6,8 @@ import {
 } from '~~/test/playwright/utils/navigation'
 import { mockProviderApis } from '~~/test/playwright/utils/route'
 
+test.describe.configure({ mode: 'parallel' })
+
 test.beforeEach(async ({ context }) => {
   await mockProviderApis(context)
 })

test/playwright/e2e/search-query-client.spec.ts

@@ -20,6 +20,8 @@ import { AUDIO, IMAGE } from '~/constants/media'
  * All of these tests test search page on the client
  */
 
+test.describe.configure({ mode: 'parallel' })
+
 test.beforeEach(async ({ context }) => {
   await mockProviderApis(context)
 })

test/playwright/e2e/search-query-server.spec.ts

@@ -22,6 +22,8 @@ import { AUDIO, IMAGE } from '~/constants/media'
  * All of these tests test server-generated search page, not the one generated on the client
  */
 
+test.describe.configure({ mode: 'parallel' })
+
 test.beforeEach(async ({ context }) => {
   await mockProviderApis(context)
 })

test/playwright/e2e/search-types.spec.ts

@@ -23,6 +23,8 @@ import { mockProviderApis } from '~~/test/playwright/utils/route'
  * Results include search meta information, media grid and Meta search form, can load more media if there are more media items.
  */
 
+test.describe.configure({ mode: 'parallel' })
+
 test.beforeEach(async ({ context }) => {
   await mockProviderApis(context)
 })

test/playwright/e2e/search.spec.ts

@@ -15,6 +15,8 @@ import {
   searchFromHeader,
 } from '~~/test/playwright/utils/navigation'
 
+test.describe.configure({ mode: 'parallel' })
+
 test.beforeEach(async ({ context }) => {
   await mockProviderApis(context)
 })

test/playwright/e2e/translation-banner.spec.ts

@@ -2,6 +2,8 @@ import { test, expect } from '@playwright/test'
 
 const russianSearchPath = '/ru/search?q=dog'
 
+test.describe.configure({ mode: 'parallel' })
+
 test.describe('translation banner', () => {
   test('Can see the translation banner and go to the correct link', async ({
     page,

test/tapes/response-494.json5

@@ -0,0 +1,80 @@
+{
+    meta: {
+        createdAt: '2022-08-11T09:32:39.277Z',
+        host: 'https://api.openverse.engineering',
+        resHumanReadable: true,
+    },
+    req: {
+        headers: {
+            connection: 'close',
+        },
+        url: '/v1/auth_tokens/token/',
+        method: 'POST',
+        body: 'Y2xpZW50X2lkPVNCbzM1dU0wNDlvQ05ZdGtOVXdXYTZ3clFpdFF1dHNMMkZhWGo2VlkmY2xpZW50X3NlY3JldD0zVG80VzJGRXhPQnc5ZUdtbDc0Uzdib2M2c2ZUM0hFZ2xBY3VqUWdMbDBuQ0NZdUhYMThwcDRoQnEwc2ZNM2FzNkpIeDlkZG5odG5lenlYaGRYb0ZDN0JvQlZnakRheWM1OU8yUm9kclI0UkN5NnlBekRtcG91YlNOaktRaVhhbyZncmFudF90eXBlPWNsaWVudF9jcmVkZW50aWFscw==',
+    },
+    res: {
+        status: 401,
+        headers: {
+            date: [
+                'Thu, 11 Aug 2022 09:32:40 GMT',
+            ],
+            'content-type': [
+                'application/json',
+            ],
+            'content-length': [
+                '27',
+            ],
+            connection: [
+                'close',
+            ],
+            'cache-control': [
+                'no-store',
+            ],
+            pragma: [
+                'no-cache',
+            ],
+            'www-authenticate': [
+                'Bearer error="invalid_client"',
+            ],
+            vary: [
+                'Authorization, Origin',
+            ],
+            'x-frame-options': [
+                'DENY',
+            ],
+            'x-content-type-options': [
+                'nosniff',
+            ],
+            'referrer-policy': [
+                'same-origin',
+            ],
+            'cross-origin-opener-policy': [
+                'same-origin',
+            ],
+            'x-request-id': [
+                'e8610770b47d46b99e41b38b54600063',
+            ],
+            'cf-cache-status': [
+                'DYNAMIC',
+            ],
+            'expect-ct': [
+                'max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"',
+            ],
+            'strict-transport-security': [
+                'max-age=15552000; includeSubDomains; preload',
+            ],
+            server: [
+                'cloudflare',
+            ],
+            'cf-ray': [
+                '738ff71b1876c223-VIE',
+            ],
+            'alt-svc': [
+                'h3=":443"; ma=86400, h3-29=":443"; ma=86400',
+            ],
+        },
+        body: {
+            error: 'invalid_client',
+        },
+    },
+}