Cypress does not have a specific command to work with child windows. It has a workaround method in jQuery through which it handles the child windows. In the Html code, a link or button opens to a child window, because of the attribute target.
If the target attribute has a value blank, it opens to a child window. Cypress uses the jQuery method remover, which is invoked by the invoke-command in Cypress. The removeAttr 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 and after performing operations on it, we can shift back to the parent URL with the go command.
The Html code for opening a child window in Cypress is as follows −
Implementation
Given below is an implementation of the commands for child windows 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 child window 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 launching of the child window within the parent window.