What is the best way to upload a file using a relative path in Playwright with TypeScript?

Question

What is the best way to upload a file using a relative path in Playwright with TypeScript?

Trying to figure out how to upload a file in a TypeScript test using Playwright.

  const fileWithPath = './abc.jpg';
  const [fileChooser] = await Promise.all([
    page.waitForEvent('filechooser'),
    page.getByRole('button', { name: 'Add a Photo' }).click(),
  ]);
  await fileChooser.setFiles([fileWithPath]);

Encountering an error when attempting this:

Error: ENOENT: no such file or directory, stat './abc.jpg'

If I switch the file path to an absolute one, it works:

const fileWithPath = '/Users/private/d/ionic/tests/playwright/optional/abc.jpg';

However, as I develop on macOS but run tests on linux, I would prefer to have the image file (abc.jpg) stored in the same folder as the test and use a relative path that works across operating systems. Any suggestions on how to achieve this?

typescript playwright

Answer 1

Answer №1

With a helpful tip from @jonrsharpe and guidance from the file-chooser documentation, I devised this effective solution:

  import * as path from 'path';

  const fileWithPath = path.join(__dirname, 'abc.jpg');
  const [fileChooser] = await Promise.all([
    page.waitForEvent('filechooser'),
    page.getByRole('button', { name: 'Add a Photo' }).click(),
  ]);
  await fileChooser.setFiles([fileWithPath]);

Answer 2

With a helpful tip from @jonrsharpe and guidance from the file-chooser documentation, I devised this effective solution:

  import * as path from 'path';

  const fileWithPath = path.join(__dirname, 'abc.jpg');
  const [fileChooser] = await Promise.all([
    page.waitForEvent('filechooser'),
    page.getByRole('button', { name: 'Add a Photo' }).click(),
  ]);
  await fileChooser.setFiles([fileWithPath]);

What is the best way to upload a file using a relative path in Playwright with TypeScript?

Answer №1

Similar questions

React Material UI Select component is failing to recognize scrolling event

Converting a string[] to an EventEmitter string[] in Angular 4 with TypeScript: Step-by-step guide

Steps for personalizing the dataset on a PrimeNG bar graph

Utilize rest parameters for destructuring操作

Getting exported members through Typescript Compiler API can be achieved by following these steps:

Testing a function that utilizes Nitro's useStorage functionality involves creating mock data to simulate the storage behavior

When a card is clicked in the parent component, data is sent to the child component in Angular. The card contains an image, name, ID,

Issues arise when Angular properties become undefined following the initialization or OnInit functions

prolonging inner interface created by supabase

When modifying the state of an array within a component, certain values may be overwritten and lost in the process

Leverage glob patterns within TypeScript declaration files

Need help in NestJS with returning a buffer to a streamable file? I encountered an error stating that a string is not assignable to a buffer parameter. Can anyone provide guidance on resolving this issue?

What is the best way to pass dynamic values to a service constructor from a component?

What is the best way to eliminate the content of an element using javascript/typescript?

Guide on importing SVG files dynamically from a web service and displaying them directly inline

How do I insert items into an ES6 Map using a specific object key/value type in Typescript?

A guide on exporting table data to PDF and enabling printing features in Angular 7

Exploring the options variables within CLI commander Js action

Error: The function $.cookie() is not defined in Angular2 Typescript

What is the process for extracting dates in JavaScript?