The recommended filename in Playwright within a Docker environment is incorrectly configured and automatically defaults to "download."

Trying to use Playwright to download a file and set the filename using download.suggestedFilename().

Code snippet:


  const downloadPromise = page.waitForEvent('download', {timeout:100000})
  await page.keyboard.down('Shift')
  await page.keyboard.press('KeyD')
  const download = await downloadPromise
  const tempPath = await download.path()
  console.log(' - tempPath : ' +tempPath)
  const suggestedFilename = await download.suggestedFilename()
  console.log(' - suggestedFilename : ' +suggestedFilename)

Output on local machine (ubuntu, French) with npx tsx:


23/01/2024 22:04:20 ( 8.78) :  - tempPath : /tmp/playwright-artifacts-zUHKYv/ab49a46d-cdcb-46fb-bd5a-8695661713e3
23/01/2024 22:04:20 ( 8.78) :  - suggestedFilename : Congrès 24.jpg

Output on docker for the same URL:


23/01/2024 21:35:48 ( 13.90) :  - tempPath : /tmp/playwright-artifacts-qCYQZ2/713b56eb-6d85-474a-b40e-68fc28da088e
23/01/2024 21:35:48 ( 13.90) :  - suggestedFilename : download

Issue seems related to Content-Disposition header and locale, as files without accents work while those with accents are named "download".

Tried adding lines to Dockerfile:


RUN apt-get install -y locales locales-all 
ENV LC_ALL fr_FR.UTF-8
ENV LANG fr_FR.UTF-8
ENV LANGUAGE fr_FR.UTF-8

Dockerfile:


FROM mcr.microsoft.com/playwright

# App directory
WORKDIR /usr/src/app

RUN apt-get update && apt-get -y install cron
RUN apt-get install -y locales locales-all 
ENV LC_ALL fr_FR.UTF-8
ENV LANG fr_FR.UTF-8
ENV LANGUAGE fr_FR.UTF-8

COPY package*.json ./
RUN npm ci
RUN npx playwright install --with-deps chrome

COPY src/. src/.
COPY tsconfig.json ./.
RUN npm run build

COPY docker/job.sh .
RUN chmod +x ./job.sh

COPY docker/entrypoint.sh .
RUN chmod +x ./entrypoint.sh

RUN touch /var/log/cron.log
CMD [ "./entrypoint.sh" ]

Any suggestions? NB: working on fork of https://github.com/CasperVerswijvelt/google-photos-backup

Answer №1

After some troubleshooting, I discovered the solution was to configure the locale and timezone in the context:

const browser = await chromium.launchPersistentContext(path.resolve(sessionDirectory), {
    headless,
    acceptDownloads: true,
    channel: 'chrome',
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
    locale: 'fr-FR',
    timezoneId: 'Europe/Paris'
  })

For more information, check out the source:

Note: I later realized that Infern0 also suggested the same solution. Apologies for not seeing your comment earlier :) Thank you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating from version 1.8.10 to 2.9.2 and encountering a build error in version 4.6.4

I currently have an angular application that is using typescript version 1.8.10 and everything is running smoothly. However, I am interested in upgrading the typescript version to 2.9.2. After making this change in my package.json file and running npm inst ...

Assign a specific value to each object

Receiving data from the backend in a straightforward manner: this.archiveService.getRooms(team).subscribe( res => { this.form = res; this.form.forEach(el => { el.reservation.slice(-6).match(/.{1,2}/g).join('/'); }); }, ...

Retrieving the Final Value from an Observable in Angular 8

Is there a way to retrieve the most recent value from an Observable in Angular 8? let test = new BehaviorSubject<any>(''); test.next(this.AddressObservable); let lastValue = test.subscribe(data=>console.log(data.value)); Despite my ef ...

What is the best way to increase the size of an array and populate it with just one specific element in Types

If I want to create an array in Python, like [1, 1, 1, 1, 1, 1, 1, 1, 1, 1], all I have to do is use [1] * 10. >>> [1] * 10 [1, 1, 1, 1, 1, 1, 1, 1, 1, 1] Is it possible to achieve the same result in TypeScript? ...

One way to update the value of the current array or object using ngModel in Angular 2 is to directly

I have a situation where I am dealing with both an array and an object. The array is populated with data retrieved from a service, while the object contains the first element of that array. feesEntries: Array<any> = []; selectedFeesEntry: any; clien ...

Attempting to combine numerous observables into a single entity within an Angular 2 project

I am grappling with the concept of Observables in RxJs. My task involves displaying all users for a specific site on a page. The User and SiteUser entities are located in separate API endpoints. Here are the relevant endpoints: userService.getSiteUsers(si ...

Issue: Unrecognized element type in next.js while starting development server

Every time I run npm run dev, I encounter the following error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from th ...

Using a For Loop in VueJS with TypeScript for an array of objects

I'm currently working on a for loop within an object array. Below is the code snippet I am working with: private async rightsOverview() { let item: any[] = []; const prod = await fetchFromApi<ProductionBaseType>(`/productions/${id ...

What is the best way to incorporate an exported TypeScript class into my JavaScript file?

One of my JavaScript files is responsible for uploading a file to Microsoft Dynamics CRM. This particular JavaScript file makes use of RequireJS to reference another JavaScript file. The referenced JavaScript file, in turn, was compiled from multiple Typ ...

Enhancing current interfaces

I'm exploring Koa and the module system in Node.js. Although I'm not asking about a specific koa question, all the code I'm working with involves using koa. In Koa, every request is defined by the Request interface: declare module "koa" { ...

Angular 6 - The requested resource does not have the necessary 'Access-Control-Allow-Origin' header

I am currently working on an Angular 6 project that includes a service pointing to server.js. Angular is running on port: 4200 and Server.js is running on port: 3000. However, when I try to access the service at http://localhost:3000/api/posts (the locat ...

Customizing Carousel Arrows in Angular with ng-bootstrap

I need help changing the position and icon of control arrows using Bootstrap. I've tried targeting "carousel-control-prev-icon" & "carousel-control-next-icon", but nothing seems to work. Any suggestions on how to properly solve this issue? Here is th ...

TypeScript: Unidentified reference to 'this' within the class

typescript version: 3.9.2 The goal is to define an interface constraint that permits only non-functional member keys on the class type NonFunctionKeys<T extends {}> = { [K in keyof T]-?: T[K] extends Function ? never : K }[keyof T]; class MyClas ...

Router failure resulted in an internal server error

When navigating to a page in my router, I make a REST API request to retrieve data from the server in the beforeEnter clause as shown below: beforeEnter: (to, form, next) => { getData().then( (response) => { ...

Error when using ES6 modules in ts-jest

I keep running into an 'unexpected token' error whenever I run my tests using ts-jest. To show you exactly what's going on, I've created a small repo with all of my current configurations available here: https://github.com/ramoneguru/t ...

What is causing the issue with entering the code? Exploring the restrictions of the mui tag

Can someone explain why I am unable to use boolean data type in this code snippet? I am trying to determine whether the user is an admin or not, and based on that, hide or disable a button. const Authenticate = useSelector(userSelector) let checkValue ...

What is the best way to retrieve the dataset object from a chart object using chart.js in typescript?

Currently, I am facing a challenge in creating a new custom plugin for chart.js. Specifically, I am encountering a type error while attempting to retrieve the dataset option from the chart object. Below is the code snippet of the plugin: const gaugeNeedle ...

In order to work with Mongoose and Typescript, it is necessary for me to

I am currently following the guidelines outlined in the Mongoose documentation to incorporate TypeScript support into my project: https://mongoosejs.com/docs/typescript.html. Within the documentation, there is an example provided as follows: import { Sche ...

After installing Highcharts, an error occurs stating 'Highcarts is not defined'

I am trying to incorporate Highcharts into an Angular 5 project using the ng2-highcharts npm package. However, I keep encountering an error stating that 'highcharts is not defined'. In my Angular 5 project, I have integrated Highcharts and utili ...

Step-by-step guide on setting up cosmosDB databases and containers in azure functions with the node sdk

In my current setup, I have database initialization code that runs on every function request, impacting performance negatively. How can I verify the existence of a container in Cosmos DB using the node SDK? It's recommended to establish static conne ...