Cypress and application using window.top答案

【问题标题】：Cypress and application using window.topCypress and application using window.top
【发布时间】：2022-12-02 02:11:09
【问题描述】：

I've recently started a new mission to write e2e tests using cypress but... the application is iframe based (which I can deal with) but my issue is it also use a ton (and I mean A TON) of top.someFunction().

Those top.someFunction() are interfering with cypress since top. is considered as the cypress window and I endup with errors like top.someFunction() is not a function.

A huge refactoring doesnt seems an option from the developers perspective... I've already spent a lot of time trying to find a way to get it work but I'm starting to wonder if we shouldnt use another automation tool but I really want to use cypress...

I'm lost.

Do you have any suggestion?

【问题讨论】：

Can you post the test that gives you the error? I'm not having a problem accessing top.someFunction() from a test.
Question needs more details, as it stands it's not reproducible.
@TesterDick reproducing is not the goal... I'm saying when running cypress, the application is broken. Cypress is aware of that. I'm asking recommendations
The goal is to get an answer, but you need to provide adequate info. SO asks for questions that are minimal and reproducible, otherwise you are asking for guesses.
Just use a top.somefunction() in a web app, run it in cypress.

标签： javascript automation cypress end-to-end

【解决方案1】：

You may just need to wrap your calls in a .then() to have them execute on the command chain.

In a simple test using this HTML I can call top.someFunction inside a chainer

<script>
  top.someFunction = () => 'someFunction called'
</script>

it('calls top.someFunction', () => {
  cy.visit('html/top.html');

   const result = top.someFunction() // fails with "top.someFunction is not a function"
                                     // runs too soon - visit not yet executed

  
  cy.then(() => {                    // put the call on the Cypress queue 
                                     // to get the timing right
    const result = top.someFunction()
    expect(result).to.eq('someFunction called')     // passes
  })
})

【讨论】：

It's the application that triggers those errors, while running the test. So basically the application is broken when running in cypress.
Are you saying that the function modify window.top content? Why top.someFunction() is not a function? It is possible to run the app in a child window where window.top is not the Cypress runner.
Exactly, Cypress being a window by itself, when running the application consider window.top being the cypress window not the one of the app. Cypress is aware of that and says using top. is anti pattern (and indeed it is) and that developer should remove .top from their app. But as I said, it's not an option in my case...

【解决方案2】：

I came across this answer searching for how to make window.top.postMessage work correctly in Cypress. For me the solution was simply to use window.parent.postMessage. In our case, we were only concerned about posting a message to the window hosting the iframe and not that it posts to the topmost window.

When not using Cypress the topmost window was that of our application. When using Cypress the topmost window was that of Cypress.

【讨论】：