无法使用 Cypress 在同一选项卡中打开链接

Question

在我们的网页中，我们有各种在新选项卡中打开的链接，但显然我们在使用 Cypress 时需要在同一选项卡中打开它们。

我已经尝试过了

cy.get('tr td:nth-child(9)').eq(index).invoke('removeAttr', 'target').click()

但这仍然会在新选项卡中打开 URL。

我也尝试添加

find('a')

：

cy.get('tr td:nth-child(9)').eq(index).find('a').invoke('removeAttr', 'target').click()

但页面从未加载（我也尝试过增加超时时间，但仍然失败）。

我想让上面的代码工作，但我也发现了这个可行的替代方案，所以我想我对下面的代码感到困惑，但我无法让调用工作。

cy.get('tr td:nth-child(9)').eq(index).find('a').then(link => {
                   cy.request(link.prop('href')).its('status').should('eq', 200)

如有任何反馈，我们将不胜感激！谢谢

Answer 1

这个的一般配方是

cy.get('tr td:nth-child(9)').eq(index).find('a')
  .then($el => {
     expect($el).to.have.attr('target','_blank')
     // update attr to open in same tab
     $el.attr('target', '_self')
  })
  .click()

_self

值可能并不总是必需的，但另一个方面是更新 DOM 时的时间。

你也可以试试这个

cy.get('tr td:nth-child(9)').eq(index).find('a')
  .invoke('attr', 'href').then(myLink => {
    cy.visit(myLink);
  })

---

跨源

请参阅此博客Stub window.open，展示了一种对窗口进行存根打开的方法。

let stub    // variable that will hold cy.stub created in the test

Cypress.on('window:before:load', (win) => {
  if (stub) {
    Object.defineProperty(win, 'open', {
      get() {
        return stub
      }
    })
  }
})

beforeEach(() => {
  stub = null
})

const href = 'url/that/link/takes/you to'

it('check that window open was called', () => {

  cy.visit('/')  // not stubbing this

  stub = cy.stub().as('open')
  
  cy.get('tr td:nth-child(9)').eq(index).find('a')
    .click()    // trigger window.open

  cy.get('@open')
    .should('have.been.calledWith', href)   // check href is called

})

it('tests the link page further', () => {
  cy.visit(href)
  // continue tests
})

如果你的 href 是可变的，你可以在 beforeEach 中获取它

beforeEach(() => cy.visit('/'))

beforeEach(() => {
  cy.get('tr td:nth-child(9)').eq(index)
    .find('a').invoke('attr', 'href').as('href')   // link value into an alias
})

it('check that window open was called', () => {

  cy.get('@href').then(href => {
 
    stub = cy.stub().as('open')
  
    cy.get('tr td:nth-child(9)').eq(index).find('a')
      .click()    // trigger window.open

    cy.get('@open')
      .should('have.been.calledWith', href)   // check href is called
  })
})

it('tests the link page further', () => {
  cy.get('@href').then(href => {
    cy.visit(href)
    // continue tests
  })
})

Answer 2

如果由于元素没有

target

属性（例如按钮）而不起作用，则应该这样做：

it.only('Example shows how to work with button that opens new tab without "target: _blank" and "href" attributes.', () => {
  cy.on('uncaught:exception', () => false)
  cy.visit('https://stackdiary.com/open-url-new-tab-javascript/')
  cy.window().then((win) => {
      cy.stub(win, "open").callsFake((url, target) => {
          return win.open.wrappedMethod.call(win, url, "_self");
      })
  });
  cy.get("#open-link-button").click();
  cy.url().should('include', 'stackdiary.com')
  cy.go('back')
})