diff --git a/app/forms/image-upload.tsx b/app/forms/image-upload.tsx
index d4068302e3..cba8df02d9 100644
--- a/app/forms/image-upload.tsx
+++ b/app/forms/image-upload.tsx
@@ -103,8 +103,8 @@ function Step({ children, state, label, className }: StepProps) {
return (
// data-status used only for e2e testing
{/* padding on icon to align it with text since everything is aligned to top */}
diff --git a/mock-api/msw/handlers.ts b/mock-api/msw/handlers.ts
index 7898990fa1..a7742c9249 100644
--- a/mock-api/msw/handlers.ts
+++ b/mock-api/msw/handlers.ts
@@ -206,10 +206,11 @@ export const handlers = makeHandlers({
disk.state = { state: 'import_ready' }
return 204
},
- diskBulkWriteImport: ({ path, query, body }) => {
+ async diskBulkWriteImport({ path, query, body }) {
const disk = lookup.disk({ ...path, ...query })
const diskImport = db.diskBulkImportState.get(disk.id)
if (!diskImport) throw notFoundErr(`disk import for disk '${disk.id}'`)
+ await delay(1000) // slow it down for the tests
// if (Math.random() < 0.01) throw 400
diskImport.blocks[body.offset] = true
return 204
diff --git a/test/e2e/image-upload.e2e.ts b/test/e2e/image-upload.e2e.ts
index 1b5970143c..f234b13ee8 100644
--- a/test/e2e/image-upload.e2e.ts
+++ b/test/e2e/image-upload.e2e.ts
@@ -24,7 +24,7 @@ async function expectUploadProcess(page: Page) {
const progressModal = page.getByRole('dialog', { name: 'Image upload progress' })
await expect(progressModal).toBeVisible()
- const steps = page.getByTestId('upload-step')
+ const steps = page.locator('css=.upload-step')
await expect(steps).toHaveCount(8)
const done = progressModal.getByRole('button', { name: 'Done' })
@@ -114,10 +114,7 @@ test.describe('Image upload', () => {
await expectVisible(page, [fileRequired])
})
- test('cancel', async ({ page, browserName }) => {
- // eslint-disable-next-line playwright/no-skipped-test
- test.skip(browserName === 'webkit', 'safari. stop this')
-
+ test('cancel', async ({ page }) => {
await fillForm(page, 'new-image')
await page.click('role=button[name="Upload image"]')
@@ -126,10 +123,7 @@ test.describe('Image upload', () => {
await expect(progressModal).toBeVisible()
// wait to be in the middle of upload
- const uploadStep = page
- .getByTestId('upload-step')
- .filter({ hasText: 'Upload image file' })
- .first()
+ const uploadStep = page.getByTestId('upload-step: Upload image file')
await expect(uploadStep).toHaveAttribute('data-status', 'running')
// form is disabled and semi-hidden
@@ -196,10 +190,7 @@ test.describe('Image upload', () => {
await page.click('role=button[name="Upload image"]')
// wait to be in the middle of upload
- const uploadStep = page
- .locator('div[data-status]')
- .filter({ hasText: 'Upload image file' })
- .first()
+ const uploadStep = page.getByTestId('upload-step: Upload image file')
await expect(uploadStep).toHaveAttribute('data-status', 'running')
// form is disabled and semi-hidden
@@ -227,7 +218,7 @@ test.describe('Image upload', () => {
{ imageName: 'disk-create-500', stepText: 'Create temporary disk' },
{ imageName: 'import-start-500', stepText: 'Put disk in import mode' },
{ imageName: 'import-stop-500', stepText: 'Get disk out of import mode' },
- { imageName: 'disk-finalize-500', stepText: 'Finalize disk' },
+ { imageName: 'disk-finalize-500', stepText: 'Finalize disk and create snapshot' },
]
for (const { imageName, stepText } of failureCases) {
@@ -236,7 +227,7 @@ test.describe('Image upload', () => {
await page.click('role=button[name="Upload image"]')
- const step = page.locator('[data-status]').filter({ hasText: stepText }).first()
+ const step = page.getByTestId(`upload-step: ${stepText}`)
await expect(step).toHaveAttribute('data-status', 'error', { timeout: 15000 })
await expectVisible(page, [
'text="Something went wrong. Please try again."',
diff --git a/test/e2e/utils.ts b/test/e2e/utils.ts
index 285bb313ca..a75b4da24a 100644
--- a/test/e2e/utils.ts
+++ b/test/e2e/utils.ts
@@ -195,7 +195,7 @@ 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 = 15 * MiB) {
+export async function chooseFile(page: Page, inputLocator: Locator, size = 3 * MiB) {
const fileChooserPromise = page.waitForEvent('filechooser')
await inputLocator.click()
const fileChooser = await fileChooserPromise