Cypress: Cypress run, screenshots shows wrong character encoding

[Terentio]

Current behavior:

Everything else is fine, tests are running normally and the ouput/results are also fine. Only screenshots/videos shows the wrong character encoding. Running cypress open, normally on a windows machine, works perfectly fine. Using docker image cypress/base:8, is also perfectly fine.

Desired behavior:

Normal character encoding (UTF-8?) on the headless electron runner (screenshots)

Steps to reproduce:

Running the following Dockerimage jenkinsxio/builder-nodejs:0.0.388 https://github.com/jenkins-x/builder-nodejs/blob/v0.0.388/Dockerfile . Installed cypress via yarn add cypress --dev, then just cypress run

Versions

Cypress v3.10
Dockerimage jenkinsxio/builder-nodejs:0.0.388 https://github.com/jenkins-x/builder-nodejs/blob/v0.0.388/Dockerfile
Browser Electron

[jennifer-shehane]

@Terentio Hey, are you able to run the tests with cypress:open and select the Electron browser there to verify the encoding works fine there and also that screenshots taken there have characters shown correctly?

[Terentio]

@jennifer-shehane Hi, locally on my windows machine, using cypress:open with Electron, the encoding works fine! I am not sure how I can get screenshots while using cypress:open... (I tried using cy.screenshot() , but that only makes a picture of the browser)
Also the screenshot from the opening post is from a failed test while using cypress:run (in a jenkins-x-nodejs-docker image).

The weird encoding only has effect on the 'left' part of the screenshot, the attached browser page is perfectly fine though!

[jennifer-shehane]

@Terentio To take a screenshot during cypress:open of the left side, you could make a test fail or try cy.screenshot({ capture: 'runner' })

[premkumar-gg]

Did you get anywhere with that, @Terentio ? I'm facing the same issue.

[Terentio]

@premkumar-gg , unfortunately no. cypress:open (on my Windows machine) and the screenshots from it, has normal encoding. During the Jenkins-ci in the Linux container(cypress:run), still has the weird encoding.

[gregwhorley]

Seeing the same issue using Jenkins 2.138.1 on a centOS 7 VM; running Cypress 3.1.0 in headless mode with the Electron browser version 59 through npx cypress run . The screenshot below shows garbled characters on the status pane and the browser pane. Any screenshots taken of test failures show the web app has rendered with a readable character set.

Any idea if it might be an issue with fonts installed on the system running the test?

[meinaart]

You need to add the proper fonts to your Docker. I had the same issue and added some fonts to the DockerFile. I have to look it up when I am back at the office since I don't have the DockerFile on my current laptop.

[jennifer-shehane]

Hey @meinaart - this would be very helpful to share.

@premkumar-gg @gwhorleyGH @Terentio Can you confirm the proper fonts are installed in your system?

[gregwhorley]

@jennifer-shehane I started using one of the docker images provided by Cypress with built-in chrome browser and haven't reproduced the issue.

[jennifer-shehane]

I am closing this issue as a configuration issue involving the Dockerfile. It would be great if @meinaart could elaborate on what specific installs in their Dockerfile fixed their issue.

Research this issue independently for your Dockerfile configuration or use our provided Docker image if you can.

[r3dDoX]

I just stumbled over the same issue with a Dockerimage running on RHEL7.

For people struggling with this too, the only thing I had to do was installing a Monospace font. I chose roboto which is fairly easy to install:

yum install -y google-roboto-mono-fonts