3

I can run my test script on the Cypress interface with npx cypress open. In this case test runs pass. But when I run the same test script headless, it fails. What can be the cause of this issue?

I run the tests always behind OpenVPN both when running headless or on Cypress interface. This is required due to authentication API.

enter image description here enter image description here

I wanted to mention that, not always the same tests are failed. While testing headless than my tests fails randomly. But when I run these tests on the Cypress interface everything passes without any error. enter image description here

OpenVPN is connected. enter image description here

This is the HTML element: Every test creates new work order via API. So for every test work order title changes with a new workorder-title one, I leave DOM here to show DOM the design.

<div class="workorder-title">21-270073 / EM / -</div> enter image description here

Barış Can Ateş
  • 218
  • 1
  • 12
  • please show us the element in HTML format that you are trying to find. Don't upload image, paste HTML code – Tal Angel Sep 27 '22 at 07:25
  • I don't think it is about HTML, test normally work without problem when I open it on cypress interface. but ok of course i share HTML :) – Barış Can Ateş Sep 27 '22 at 07:33
  • 1
    @BarışCanAteş, I had the same issue and was so much frustrated, but unfortunately I can't remember correctly what the cause was. It was something related to the URL I was visiting. I think somehow the `baseUrl` got messed up , and headless could not handle it. – Darko Riđić Sep 30 '22 at 02:42
  • @DarkoRiđić Thank you so much. My problem is very similar to yours, Do you remember how did you fix it? – Barış Can Ateş Sep 30 '22 at 07:53
  • 1
    @BarışCanAteş, does your website rely on localstorage maybe? – Darko Riđić Sep 30 '22 at 08:11
  • @DarkoRiđić yes, I use local storage to get authorization tokens to feed API requests. my first test case is generally stuck at the API request step but sometimes passes, it looks strange. When it is stuck at API req step then it sees the authorization token as null. Today I was working on this problem to find out why this is happening. – Barış Can Ateş Sep 30 '22 at 11:05
  • 1
    @BarışCanAteş, does the URL you're visiting maybe have a double slash "//"? If so, try removing one slash. Please check this – Darko Riđić Sep 30 '22 at 18:20
  • @DarkoRiđić cy.visit('https://***.******.com/') this is the my URL. – Barış Can Ateş Sep 30 '22 at 19:50
  • 1
    @BarışCanAteş, this might and does sound stupid, but try removing the slash at the end. – Darko Riđić Sep 30 '22 at 20:18
  • 1
    I tried nothing happened, but I found something interesting. My website uses a refresh policy which is working stable while the web opens the cypress interface. But that looks not working on the headless run. – Barış Can Ateş Sep 30 '22 at 21:17
  • Sad to hear. But one thing is for sure: The cause lies somewhere on frontend. The website I had problems with, was doing something with localstorage non-stop. It was not an "ordinary" website. – Darko Riđić Oct 01 '22 at 01:30

1 Answers1

0

I found the problem. First of all everything, there were two different issues to solve about my Stackoverflow issue.

1- my API request came as unauthorized.

I was getting authorization tokens like this--> anyVariable=localStorage.getItem('autToken')

This was work without a problem while I using npx Cypress open because Cypress works extremely quickly on the interface and anyVariable fully filled by token and works without any problem.

But while using headless mode then cypress gets slower so that's why Cypress sent API req before anyVariable fully filled by token and responses as unauthorized.

I read some issues and articles about Cypress and Getting item by LocalStorage. People said that this usage "anyVariable=localStorage.getItem('autToken')" to get item local storage works as async So that's why I used cy. command to solve my problem and my attempt completely solved my problem.

I solved the problem by using the chainable cypress method.

    cy.window()
        .then((window) => {
            return window.localStorage.getItem('anyVariable')
        })
        .then((token) => {
            setAnyVariable(token)
        })

2- The second problem was caused by one of our frontend component which refreshes the newly created item list to be newly created items visible. It was strange because that component was works stable when I run my tests with npx cypress open.

Why I explained that if you face with similar issue then you can try to check your frontend components.

I working on a solution to that problem right now.

Barış Can Ateş
  • 218
  • 1
  • 12