I have a bunch of Cypress tests for a project for a long time, and all went well so far. All tests are end-to-end. I use Cypress 14.4.1 Recently, I had to write tests to check if some button leads to the expected external URL. There are multiple cases around the same thematic (payment methods with different configuration), so I wrote functions in one file to keep it clear. I only want to check if each payment method leads to the corresponding URL, no further tests.
describe('Test payments', () => {
describe('Cart config A', () => {
it('Method 1', () => {
fillCart()
selectOptionsForConfigA()
payment1()
})
it('Method 2', () => {
fillCart()
selectOptionsForConfigA()
payment2()
})
[...]
Each paymentX()
function can be simplified this way:
function payment1() {
cy.get('input[name=psp1-choice]').click()
cy.get('button[type=submit][name=XXXXX]:visible').click()
cy.origin('payment.psp1.com', () => {
cy.url().should('eq', 'https://payment.psp1.com/process')
})
}
If I run one test (eg. "Test payments > Cart config A > Method 1") only, all goes well and the test passes. If I run two tests one after the other : "... > Method 1" + "... > Method 2" as in the code above, the first test passes and I have this error for the second test:
TypeError: The following error originated from your application code, not from Cypress.
> Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
When Cypress detects uncaught errors originating from your application it will automatically fail the current test.
This behavior is configurable, and you can choose to turn this off by listening to the `uncaught:exception` event.
https://on.cypress.io/uncaught-exception-from-application
at payment2 (webpack:///./tests/checkout/Payments.cy.js:61:7)
First strange behavior : I have a "uncaught:exception" listener but it does seem to be used. This is secondary in my problem, but this is already weird.
Second strange thing : the line at which the error is triggered is in the function for the 1st (successful) test, not the 2nd ! In the code above, it would be this line :
`cy.origin('payment.psp1.com', () => {` from `payment1()`
If I flip the two tests (payment2 before payment1), the behavior is similar: error on cy.origin line in payment2
function.
And what's the matter with jQuery?!
To fix the issue, this is what I tried.
I enabled screenshots and videos, but there is no clue in them. When I compare the end of the 2 tests in the video, I see no difference before the error.
By default, our tests use Chrome headless. I tried to use Firefox, the result is the same (as expected, but you never know).
If I split the tests in different files, it works. But for the sake of code maintenance and tests summary readability (we send it by email on "after:run"), this is not a solution I want to use.
I tried to set experimentalModifyObstructiveThirdPartyCode
to true : same result.
I tried to add cy.wait()
before running the second test, because, well... my next step is trying voodoo, so you never know. No change with the wait.
Found the solution.
The problem was on the destination page.
If anyone has the same problem, you must catch the exception inside a cy.origin block :
cy.origin('www.external.domain', () => {
cy.on('uncaught:exception', (err, runnable) => {
return false // or anything that suits your needs
})
})