Handling child tabs in CypressIO

In CypressIO, we cannot directly handle the child windows. To handle the child tabs, jQuery methods should be used. The child tab is created when there is a target attribute in the HTML.

CypressIO doesn't support a new tab opening. Cypress team considers that the automation testing becomes flakey while handling multiple tabs. Instead, they have created an option to open the child tabs in the current tab itself so there is no need of opening multiple tabs.

So, to avoid the child window opening and to open the link in the same window, we have to delete the target attribute. Let us understand how to omit the target attribute in cypress with the help of the jQuery method invoke().

The below image describes that when we click the Also read, a new window gets opened in another tab. This is due to the presence of the target attribute.

target-attribute-html-cypress

Example program: In the below program, .invoke("removeAttr", "target")removes the target attribute and allows cypress to load the new link in the same window.

describe("My Second Test Suite", function () {
  it("Handling child tabs and browser controls", function () {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit("https://chercher.tech/java/index-selenium-webdriver");
    cy.get(":nth-child(17) > .alsosee > a")
      .invoke("removeAttr", "target")
      .click();
  });
});
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions