如何使用 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.location

it('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');

}