Found text garbles in the page when opened through cypress in chrome and edge browsers

[meghaharidas]

Current behavior

I am running the percy using the cypress script for visual automation in my project. Its a Japanese website page and noticed for few of the pages the texts are garbled. The same page when I open directly there are no issues found. When tried running the script using npx cypress open command the below error was captured in the console of the page.

Page URL : https://www.daiwa.jp/products/bond/afr/hm2/FBSbond_r.html cypress_issue_text.docx

s_code.js:571 Uncaught TypeError: Cannot read properties of null (reading 'match')
    at s_code.js:571:12
    at NodeList.forEach (<anonymous>)
    at setAdobeMC (s_code.js:569:8)
    at HTMLDocument.<anonymous> (s_code.js:564:2)
(anonymous) @ s_code.js:571
setAdobeMC @ s_code.js:569
(anonymous) @ s_code.js:564
VM1622:1 

       GET
https://connect.facebook.net/en_US/fbevents.js
net::ERR_EMPTY_RESPONSE
(anonymous) @ VM1622:1
(anonymous) @ VM1622:1
(anonymous) @ gtm.js?id=GTM-5DC8LCL:646
(anonymous) @ gtm.js?id=GTM-5DC8LCL:647
b @ gtm.js?id=GTM-5DC8LCL:647
vf @ gtm.js?id=GTM-5DC8LCL:168
e @ gtm.js?id=GTM-5DC8LCL:435
(anonymous) @ gtm.js?id=GTM-5DC8LCL:114
(anonymous) @ gtm.js?id=GTM-5DC8LCL:436
(anonymous) @ gtm.js?id=GTM-5DC8LCL:436
Xw @ gtm.js?id=GTM-5DC8LCL:444
fx @ gtm.js?id=GTM-5DC8LCL:449
by @ gtm.js?id=GTM-5DC8LCL:465
ey @ gtm.js?id=GTM-5DC8LCL:470
gy @ gtm.js?id=GTM-5DC8LCL:471
o @ FBSbond_r.html:4
(anonymous) @ FBSbond_r.html:4
setTimeout (async)
a @ FBSbond_r.html:4
(anonymous) @ FBSbond_r.html:4
H @ gtm.js?id=GTM-5DC8LCL:129
iy @ gtm.js?id=GTM-5DC8LCL:474
(anonymous) @ gtm.js?id=GTM-5DC8LCL:660
(anonymous) @ gtm.js?id=GTM-5DC8LCL:657
(anonymous) @ gtm.js?id=GTM-5DC8LCL:657
(anonymous) @ gtm.js?id=GTM-5DC8LCL:665
FBSbond_r.html:1 Refused to execute script from '
[https://dsp.logly.co.jp/6570/sg?id=6570&url=&rurl=&im_uid='](https://dsp.logly.co.jp/6570/sg?id=6570&url=&rurl=&im_uid=%27)
because its MIME type ('image/gif') is not executable.

percy.yml configurations used

version: 2
snapshot:
  widths:
    - 375
    - 1280
  minHeight: 1024
  percyCSS: ""
discovery:
  allowedHostnames: []
  disallowedHostnames: []
  networkIdleTimeout: 699
upload:
  files: "**/*.{png,jpg,jpeg}"
  ignore: ""
  stripExtensions: false

package.json configuration

"author": "",
  "license": "ISC",
  "devDependencies": {
    "@percy/cli": "^1.27.7",
    "@percy/cypress": "^3.1.2",
    "cypress": "^13.6.3",
    "cypress-iframe": "^1.0.1",
    "cypress-mochawesome-reporter": "^3.2.2"
  },
  "dependencies": {
    "@percy/report": "^0.0.6"
  } 

Desired behavior

There should not be any text garbles and display all the characters properly on the cypress/percy .

Test code to reproduce

The below code is added in my framework to visit the page and capture the screenshot.

```js it("open-page for visual validation for migrated site pages", function () { let arrayOfPage = this.testdata.url; let i = 0; arrayOfPage.forEach((element) => { cy.visit(element); i = i + 1; cy.wait(3000).percySnapshot(this.testdata.site + "Page screenshot " + i); }); }); }); The same when run using API the error in text is not shown in the response header. Below is the code used to run import "cypress-mochawesome-reporter/register"; describe("trial", () => { beforeEach(function () { cy.fixture("test-url/pageURL").then((data) => { this.testdata = data; }); }); it("trial", function () { cy.request(this.testdata.pageURL[0].homePageUrl).then((res) => { cy.log(res.body); console.log(res.body); }); // cy.percySnapshot("teaser", { scope: ".cmp-teaser" }); //cy.percySnapshot("HomepageWithTableAndTeaserComponent") }); }); ``` ### Cypress Version 13.6.3 ### Node version v16.18.0 ### Operating System windows 11 ### Debug Logs _No response_ ### Other _No response_

[jennifer-shehane]

@meghaharidas I see this error in the console.

Refused to execute script from 'https://dsp.logly.co.jp/6570/sg?id=6570&url=&rurl=&im_uid=' because its MIME type ('image/gif') is not executable.

<script type="text/javascript" async="" src="https://dsp.logly.co.jp/6570/sg?id=6570&amp;url=&amp;rurl=&amp;im_uid="></script>

Perhaps that's causing the issue.

[meghaharidas]

@jennifer-shehane thanks for the reply. As this page is manually opening correctly on chrome browser even in in-Cognito mode. There are no errors in the console. I see this issue only on the cypress browser on test execution. Even if I open the new tab in cypress manually i see the text is garbled. Need you help in confirming whether this issue needs to be fixed from the cypress end. Is there any setting /configuration needs to be done from my side please let me know.

[jennifer-shehane]

@meghaharidas Yes, we should be handling this situation better. Just highlighting the error we're not handling in case this surfaces something within your app that should be addressed.

[mkathu]

any update on this? @jennifer-shehane