chore: skip image upload e2es in safari

playwright.config.ts

@@ -22,7 +22,7 @@ export default {
   timeout: 2 * 60 * 1000, // 2 minutes, surely overkill
   fullyParallel: true,
   use: {
-    trace: 'on-first-retry',
+    trace: 'on-all-retries',
     baseURL: 'http://localhost:4009',
   },
   projects: [

test/e2e/image-upload.e2e.ts

@@ -48,7 +48,10 @@ async function fillForm(page: Page, name: string) {
 }
 
 test.describe('Image upload', () => {
-  test('happy path', async ({ page }) => {
+  test('happy path', async ({ page, browserName }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(browserName === 'webkit', 'safari. stop this')
+
     await page.goto('/projects/mock-project/images')
     await expectNotVisible(page, [
       'role=cell[name="new-image"]',
@@ -61,7 +64,7 @@ test.describe('Image upload', () => {
 
     await fillForm(page, 'new-image')
 
-    await page.click('role=button[name="Upload image"]')
+    await page.getByRole('button', { name: 'Upload image' }).click()
 
     // now the modal pops open and the thing starts going
     await expectUploadProcess(page)
@@ -74,31 +77,37 @@ test.describe('Image upload', () => {
     })
   })
 
-  test('with name taken', async ({ page }) => {
+  test('with name taken', async ({ page, browserName }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(browserName === 'webkit', 'safari. stop this')
+
     await fillForm(page, 'image-1')
 
     await expectNotVisible(page, ['text="Image name already exists"'])
-    await page.click('role=button[name="Upload image"]')
+    await page.getByRole('button', { name: 'Upload image' }).click()
     await expectVisible(page, ['text="Image name already exists"'])
 
     // changing name and resubmitting removes error
     await page.fill('role=textbox[name="Name"]', 'image-5')
-    await page.click('role=button[name="Upload image"]')
+    await page.getByRole('button', { name: 'Upload image' }).click()
     await expectNotVisible(page, ['text="Image name already exists"'])
     await expectUploadProcess(page)
 
     // TODO: changing name alone should cause error to disappear
   })
 
-  test('form validation', async ({ page }) => {
+  test('form validation', async ({ page, browserName }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(browserName === 'webkit', 'safari. stop this')
+
     await page.goto('/projects/mock-project/images-new')
 
     const nameRequired = 'role=dialog[name="Upload image"] >> text="Name is required"'
     const fileRequired = 'role=dialog[name="Upload image"] >> text="Image file is required"'
 
     await expectNotVisible(page, [nameRequired, fileRequired])
 
-    await page.click('role=button[name="Upload image"]')
+    await page.getByRole('button', { name: 'Upload image' }).click()
     await expectVisible(page, [nameRequired, fileRequired])
 
     await page.fill('role=textbox[name="Name"]', 'new-image')
@@ -109,15 +118,18 @@ test.describe('Image upload', () => {
     await expectNotVisible(page, [fileRequired])
 
     await page.click('role=button[name="Clear file"]')
-    await page.click('role=button[name="Upload image"]')
+    await page.getByRole('button', { name: 'Upload image' }).click()
 
     await expectVisible(page, [fileRequired])
   })
 
-  test('cancel', async ({ page }) => {
+  test('cancel', async ({ page, browserName }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(browserName === 'webkit', 'safari. stop this')
+
     await fillForm(page, 'new-image')
 
-    await page.click('role=button[name="Upload image"]')
+    await page.getByRole('button', { name: 'Upload image' }).click()
 
     const progressModal = page.getByRole('dialog', { name: 'Image upload progress' })
     await expect(progressModal).toBeVisible()
@@ -187,7 +199,7 @@ test.describe('Image upload', () => {
 
     await fillForm(page, 'new-image')
 
-    await page.click('role=button[name="Upload image"]')
+    await page.getByRole('button', { name: 'Upload image' }).click()
 
     // wait to be in the middle of upload
     const uploadStep = page.getByTestId('upload-step: Upload image file')
@@ -222,10 +234,13 @@ test.describe('Image upload', () => {
   ]
 
   for (const { imageName, stepText } of failureCases) {
-    test(`failure ${imageName}`, async ({ page }) => {
+    test(`failure ${imageName}`, async ({ page, browserName }) => {
+      // eslint-disable-next-line playwright/no-skipped-test
+      test.skip(browserName === 'webkit', 'safari. stop this')
+
       await fillForm(page, imageName)
 
-      await page.click('role=button[name="Upload image"]')
+      await page.getByRole('button', { name: 'Upload image' }).click()
 
       const step = page.getByTestId(`upload-step: ${stepText}`)
       await expect(step).toHaveAttribute('data-status', 'error', { timeout: 15000 })

test/e2e/silos.e2e.ts

@@ -7,8 +7,6 @@
  */
 import { expect, test } from '@playwright/test'
 
-import { MiB } from '~/util/units'
-
 import {
   chooseFile,
   clickRowAction,
@@ -89,8 +87,8 @@ test('Create silo', async ({ page }) => {
   // Validation error for missing name + key and cert files
   await expectVisible(page, [certRequired, keyRequired, nameRequired])
 
-  await chooseFile(page, page.getByLabel('Cert', { exact: true }), 0.1 * MiB)
-  await chooseFile(page, page.getByLabel('Key'), 0.1 * MiB)
+  await chooseFile(page, page.getByLabel('Cert', { exact: true }), 'small')
+  await chooseFile(page, page.getByLabel('Key'), 'small')
   const certName = certDialog.getByRole('textbox', { name: 'Name' })
   await certName.fill('test-cert')
 
@@ -110,8 +108,8 @@ test('Create silo', async ({ page }) => {
 
   // Change the name so it's unique
   await certName.fill('test-cert-2')
-  await chooseFile(page, page.getByLabel('Cert', { exact: true }), 0.1 * MiB)
-  await chooseFile(page, page.getByLabel('Key'), 0.1 * MiB)
+  await chooseFile(page, page.getByLabel('Cert', { exact: true }), 'small')
+  await chooseFile(page, page.getByLabel('Key'), 'small')
   await certSubmit.click()
   await expect(page.getByRole('cell', { name: 'test-cert-2', exact: true })).toBeVisible()
 

test/e2e/utils.ts

@@ -195,7 +195,14 @@ export async function expectObscured(locator: Locator) {
 
 export const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
-export async function chooseFile(page: Page, inputLocator: Locator, size = 3 * MiB) {
+const bigFile = Buffer.alloc(3 * MiB, 'a')
+const smallFile = Buffer.alloc(0.1 * MiB, 'a')
+
+export async function chooseFile(
+  page: Page,
+  inputLocator: Locator,
+  size: 'large' | 'small' = 'large'
+) {
   const fileChooserPromise = page.waitForEvent('filechooser')
   await inputLocator.click()
   const fileChooser = await fileChooserPromise
@@ -204,6 +211,6 @@ export async function chooseFile(page: Page, inputLocator: Locator, size = 3 * M
     mimeType: 'application/octet-stream',
     // fill with nonzero content, otherwise we'll skip the whole thing, which
     // makes the test too fast for playwright to catch anything
-    buffer: Buffer.alloc(size, 'a'),
+    buffer: size === 'large' ? bigFile : smallFile,
   })
 }