Cypress 简明教程

Cypress - Tabs

Cypress 没有处理选项卡的具体命令。它在 jQuery 中有一个解决方法，通过它处理选项卡。在 html 代码中，由于 target 特性，链接或按钮会打开新选项卡。

Cypress does not have a specific command to work with tabs. It has a workaround method in jQuery through which it handles the tabs. In the html code, a link or button opens to a new tab, because of the attribute target.

如果 target 特性具有空白值，它会打开新选项卡。Cypress 使用 jQuery 方法 removeAttr，它由 invoke 命令调用。removeAttr 删除特性，该特性作为 invoke 方法的参数之一传递。

If the target attribute has value blank, it opens to a new tab. Cypress uses the jQuery method removeAttr, which is invoked by the invoke command. The removeAttr deletes the attribute, which is passed as one of the parameters to the invoke method.

一旦删除 target=blank，链接/按钮就会在父窗口中打开。稍后，对其执行操作之后，我们可以使用 go 命令返回父 URL。

Once the target=blank is removed, then a link/button opens in the parent window. Later on after performing the operations on it, we can shift back to the parent URL with the go command.

为此，Html 代码如下：

The Html code for the same is as follows −

Implementation

下面是有关 Cypress 中选项卡的命令实现：

Given below is the implementation of the use of commands with regards to tabs in Cypress −

describe('Tutorialspoint', function () {
   // test case
   it('Scenario 1', function (){
      // url launch
      cy.visit("https://the-internet.herokuapp.com/windows")
      // delete target attribute with invoke for link
      cy.get('.example > a')
      .invoke('removeAttr', 'target').click()
      // verify tab url
      cy.url()
      .should('include', 'https://the-internet.herokuapp.com/windows/new')
      // shift to parent window
     cy.go('back');
   });
});

Execution Results

输出如下 −

The output is as follows −

输出日志显示在父窗口中删除了 target 特性并启动了新选项卡。

The output logs show the deletion of the target attribute and launch of the new tab within the parent window.