Cypress fixture to read a file saved as UTF8 Json would fail with Unexpected token  in JSON at position 0

[awbmansour]

Bug Report

Current behavior:

Using Cypress fixture to read a file saved as UTF8 Json would fail with:

cy.fixture('srvreqts2.json', 'utf8').as('srvreqts');  

Unexpected token  in JSON at position 0  

Desired behavior:

Suggestion:
cy.fixture when called with encoding UTF8 should skip the first marker character in the JSON file till it reaches the first [ or { character and then it starts interpreting the file.

Steps to reproduce: (app code and test code)

In Windows 10: Open Notepad and write a UTF8 Json and use Save As and select UTF8 encoding

[
  { 
    "reqtypd": "طلب تركيب", 
    "mainmobile": "0123456789", 
    "custstreetd": "الشهيد محمود قضب" 
  }, 
  { 
    "reqtypd": "طلب تركيب", 
    "mainmobile": "0123456789", 
    "custstreetd": "الشهيد محمود قضب" 
  }
]

Then try to read the file with

beforeEach(function () {
      cy.fixture('srvreqts.json', 'utf8').as('srvreqts');
});

Currently the test will fail completely and no tests can be run. The only workaround is to forget testing in UTF8 and resort back to test in English only, or stop using fixture to read a JSON file and try something else … which I do not know yet what to do ..

Versions

Windows 10
Chrome 71
Cypress latest 3.1.4 installed using npm from a BASH
Code is being written using Microsoft VS 2017 and/or notepad

[jennifer-shehane]

I've been unable to reproduce this issue with the information you provided.

I saved the json content above within Sublime Text's Save with Encoding > UTF8 option and added the file within the cypress/fixtures directory then referenced in the tests as a fixture. I was even able to mock an XHR response with the utf8 json file.

cy.fixture('example.json', 'utf8').as('example')

Please double check and make sure you are provided all of the information needed to reproduce your issue.

Versions

MacOS
Chrome 70 & Chrome 72
Cypress 3.1.4

[awbmansour]

Thanks Jennifer a lot for your reply.

You guided me to the correct set of tools to get this to work.

For the benefit of others facing the same issue, which I think they will, when we have a JSON file (or content file) that contains non-latin characters, Do Not Use Notepad or VisualStudio to create the file, as you will be prompted to save it as UTF8 and if you do not, you will lose the non-ASCII characters from the file. This the cause of the problems I faced, as it looks that VS or Notepad would create the file with special markers (file size will almost double) and Cypress fixture will not be able to read it.

The solution proposed by Jennifer worked very well, use Sublime Text to save the file as UTF8 (without BOM) and then you can continue editing using VS.

PS, you might not be able to use Sublime Text conveniently to edit your file as it does not do a good contextual character presentation (RTL languages), but good news you can use VS to edit and save the file, after fixing the encoding using Sublime Text

I think we can close this as we have a reasonable workaround to get Cypress to work as documented.

[kamranayub]

@awbmansour Thanks, that was the problem. Creating the file with Visual Studio uses UTF-8 With BOM.

If you just open in VS Code, click "UTF-8" at the bottom, then "Save with encoding" as "utf-8" that fixes the problem 🥲

It would be great if Cypress fixture utilities could handle this internally.

Version: 12.3.0