我们如何测试从 cypress 中的现有选项卡重定向的新选项卡？

Question

需要测试从现有选项卡重定向的新选项卡。 我们如何在柏树中测试它？

Answer 1

你不能测试那个。 赛普拉斯不支持新窗口和/或选项卡。 作为解决方法，您可以做的是：

1. 测试是否存在指向新窗口/选项卡的链接
2. 创建另一个测试，立即打开该窗口/选项卡的 URL。

Answer 2

我确实找到了解决这种情况的方法，我想访问一个新的 URL，然后测试它的内容。 这对我有效，因为该 URL 在 HTML 中可用

如果可行，试试这个

it('redirect',()=>{
    cy.visit('website')
    cy.get(`.nav-items :nth-child(1) a`) // directly clicking this element opens the same link a new tab
    .should('be.visible')
    .invoke('attr','href')
    .then(href=>{
        cy.visit(href)
    })
})

Answer 3

如果它被重定向到一个new url/tab （即一个新的子域），并且在 cypress 中，如果它作为一个新选项卡打开，您仍然可以使用 cypress 进行测试。 我以邮递员网站为例来说明这一点。 在 postman 站点中，单击“ Learning Center ”选项卡将打开一个新选项卡。 下面的测试示例将在您现有的测试运行器选项卡中打开。 请参考下面我的代码：

context('New tab actions', () => {
    it('Test to open a new tab in cypress and test the page', () => {
      cy.visit('https://www.getpostman.com/');
      cy.get('#mobile-menu-button').click();
      cy.get('#mobileNav > #siteNav > nav > ul > li').contains("Product ");
      cy.get('#mobileNav > #siteNav > .site-nav__secondary-menu > a').first().then(($a)=>{
        const newUrl =  Cypress.$($a).attr('href'); 
        console.log(newUrl);
        cy.visit(newUrl);
        cy.get('.header__title').invoke('text').then((text)=>{
            const headerText = text;
            expect(headerText).to.contain('Learning Center');
            //Similarly you can follow the same mechanism and start writing all of remaining tests related to that page....
        })
      })
    })
})