Test image upload with Playwright and Angular

Question

I can't seem to make my Playwright test upload image. I have tried with file chooser and with setInputFiles but I might be wrong with order of actions.

Here is my spec.ts file

import { Page, test } from '@playwright/test'

test.use({ storageState: 'playwright/.auth/user.json' })

test.describe('Event creation page', () => {
  let requestPage: Page
  test.beforeEach(async ({ page }) => {
    requestPage = page
    await requestPage.goto('/event/create')
  })

  test('Test event creation', async () => {
    await requestPage.goto('/evenement/creation')
    await requestPage.getByTestId('event-title').fill('Event title')
    await requestPage.getByTestId('event-description').fill('Event event description')
    await requestPage.getByTestId('upload-photo-button').click()
    await requestPage
      .getByTestId('upload-photo-button')
      .setInputFiles('fixtures/test-image.jpg')
  })
})

The error I have is Error: Error: ENOENT: no such file or directory, stat 'c:\Users\project\fixtures\test-image.jpg'

but I dont

my project structure is following:

e2e
 fixtures
   test-image.jpg
 my-other-test-files
src
 app

Thank you!

Vishal Aggarwal · Answer 1 · 2023-07-31T09:47:53.083

1

Start from project root directory ("./")

await requestPage
      .getByTestId('upload-photo-button')
      .setInputFiles('./e2e/fixtures/test-image.jpg')

edited Jul 31 '23 at 09:47

answered Jul 28 '23 at 15:50

Vishal Aggarwal

1,929
1
13
23

thanks. this was part of the problem. Other part of the problem was the fact that I put the data-testid on button tag instead of input tag. – LaCodeM Jul 31 '23 at 08:33

score 0 · Answer 2 · answered Jul 31 '23 at 08:40

after few hours I have find a problem. First problem is that I put data-testid="upload-photo-button" to button tag instead to input tag and second is that we need to start from root directory when looking for a image to upload:

instead this:

 <button type="button" (click)="upload()" data-testid="upload-photo-button">
                Upload Button
                <input type="file" (change)="onPhotoUpload($event)" type="file"
                  accept="image/apng, image/jpeg, image/png" />
            </button>

do this:

 <button type="button" (click)="upload()">
                Upload Button
                <input type="file" data-testid="upload-photo-button"(change)="onPhotoUpload($event)" type="file"
                  accept="image/apng, image/jpeg, image/png" />
            </button>

then in your Playwright test:

await page
      .getByTestId('upload-photo-button')
      .setInputFiles('./e2e/fixtures/test-image.jpg') // note: not 'e2e/fixtures/test-image.jpg'

for anyone who comes to this page also see:

Playwright: Upload files from non-input element that cannot be used page.setInputFiles?

Test image upload with Playwright and Angular

2 Answers2