Blog

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.

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

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.

The Html code for the same is as follows −

Implementation

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

describe('Adglob', 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 −

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