如何使用 Cypress 测试客户端重定向到第 3 方站点？

Question

Cypress 提供了一种使用request测试服务器端重定向的简单方法：

cy.request({

  url: `/dashboard/`,

  followRedirect: false, // turn off following redirects

}).then((resp) => {

  expect(resp.redirectedToUrl).to.eq('http://example.com/session/new')

})

但是，这不适用于客户端重定向，因为页面在重定向发生之前已成功加载，这意味着响应是针对页面的，而不是针对重定向的。

如何测试客户端重定向？

我需要一种捕获重定向并验证的方法：

• 发生了

• 是正确的 URL。

笔记：

• 我不想跟随重定向离开正在测试的应用程序。我没有测试整个身份验证流程。我只需要知道有一个重定向。

• 我无法更改此身份验证流程。重定向是不可避免的。

• 重定向发生在初始化期间，而不是任何用户交互的结果。

• 重定向使用：window.location.href = url

• 请参阅下面我的回答以尝试解决此问题。

Answer 1

更新：这并不可靠。我刚刚做了一些重构，看来这个解决方案也有缺陷。重定向可能发生在 cypress 访问页面和触发 之间，cy.wait因此测试最终会等待已经发生的事情。下面的内容可能仍然适合您，具体取决于您的重定向何时被触发，但如果它是在初始化时触发的，则这似乎不起作用。不太喜欢这个解决方案，因为重定向仍然发生（我还没有找到取消它的方法），但它至少测试了重定向是否发生，并允许我检查查询：cy.intercept({ pathname: `/sessions/new` }).as(`loginRedirect`)cy.visit(`/dashboard/`)cy.location().then(($location) => {  cy.wait(`@loginRedirect`).then(($interceptor) => {    const { query } = urlParse($interceptor.request.url)    expect(query).to.equal(`?token=true&redirect=${$location.href}`)  })})注意：在 v6 中route2更改为。intercept

Answer 2

Gleb Bahmutov 在Deal with window.location.replace中有一种方法，它window.location在源中重命名为window.__location有效的存根。它用于在加载页面到达浏览器之前cy.intercept()修改加载页面，即在实例化并成为完全不可变/不可损坏的对象之前。window.locationit('replaces', () => {  cy.on('window:before:load', (win) => {    win.__location = {                           // set up the stub      replace: cy.stub().as('replace')    }  })  cy.intercept('GET', 'index.html', (req) => {   // catch the page as it loads    req.continue(res => {      res.body = res.body.replaceAll(        'window.location.replace', 'window.__location.replace')    })  }).as('index')  cy.visit('index.html')  cy.wait('@index')  cy.contains('h1', 'First page')  cy.get('@replace').should('have.been.calledOnceWith', 'https://www.cypress.io')})这个存根replace，但同样应该适用于设置href器。

Answer 3

这是我发现的唯一方法是检测成功的重定向客户端（如果是第三方网站）。JavaScript 有一个方便实用的函数，称为window.open(). 您可以用它做很多事情，包括重定向网页。_self这可以通过将目标设置为或 来完成_top。通过使用 while 循环，您可以尽快运行代码。这是我如何记录客户端重定向的草稿。var redirectURL = 'https://www.example.com/',redirectWindow = window.open(redirectURL, '_top'),redirected = false,count = 0;while(true) {    if (redirectWindow.document.readyState === 'complete') {        redirected = true;        //Your code here. I am just logging that it is in the process of redirection.        console.log('redirecting')        break;    }    if (count > 2000) {        redirected = false;        break;    }    count++    }if (redirected == false) {    console.log('Error: Redirect Failed');}