CODEWITHSUNDEEP
javascriptscrollcypress
Vitoldas
Vitoldas

Reputation: 53

Cypress does not automatically scroll

I've tried to use scrollIntoView(), scrollTo() methods, tried to nullify css settings, but all were in way. Current situation: When I run test, it gives me this error: (Timed out retrying: cy.type() failed because the center of this element is hidden from view:) When test runs, it cannot scroll down so it cannot see the locator it needs. When I scroll manually in the meantime down enough to physically see the element, cypress finds it, gets it and make other methods.

Desirable situation: The test would run the way it could automatically scroll down to the page to see the element it needs so no manual assistance would be needed.

I write down the code here, but changed personal data. Should i use here code lines like:

// document.getElementsByTagName("html")[0].style.scrollBehavior = "unset";

or:

const disableSmoothScroll = () => {
  cy.document().then((document) => {
    const node = document.createElement("style");
    node.innerHTML = "html { scroll-behavior: unset !important; }";
    document.body.appendChild(node);
  });
};

I tried implementing them both, because i've found them in other similar issues, but they did nothing to me.

import exampleImport from "../../PageObjects/examples/exampleImportClasses.js";

describe("Example Test", function () {
  it("Details1", function () {
    pp.login();
    pp.NPAsubmit();
    cy.get("#name", { timeout: 30000 }).type("Test");
    cy.get("#Number", { timeout: 30000 }).type("123");
    cy.get("#vatNumber", { timeout: 30000 }).type("123");
    pp.Address_default();
  });
});

class exampleImport {
  login() {
    cy.visit("https://xxx");
    cy.get("#email", { timeout: 30000 })
      .clear()
      .type("[email protected]");
    cy.get("#password").clear().type("example");
    cy.get("button[type=submit]").click();
    cy.url().should("include", "example");
  }
  NPAsubmit() {
    cy.get(":nth-child(3) > .nav-link", { timeout: 30000 }).click();
    cy.get(".btn-primary").click();
  }
  Address_default() {
    cy.get("#street").scrollIntoView().should("be.visible");
    cy.get("#street").type("Test");

    cy.get("#city").scrollIntoView().should("be.visible");
    cy.get("#city").type("Test");
    cy.get("#country").select("Uruguay (UY)");
  }
}

export default exampleImport;

Upvotes: 2

Views: 6458

Answers (2)

Vitoldas
Vitoldas

Reputation: 53

Thank you for your answer, but i figured it out what was wrong. I disabled smooth scroll in the wrong page so when it redirected, the disableSmoothScroll command didn't work. Now cypress automatically moves the page down when testing.

import exampleImport from "../../PageObjects/examples/exampleImportClasses.js";

describe("Example Test", function () {
  it("Details1", function () {
    const disableSmoothScroll = () => {
      cy.document().then((document) => {
        const node = document.createElement("style");
        node.innerHTML = "html { scroll-behavior: inherit !important; }";
        document.body.appendChild(node);
      });
    };
    const pp = new exampleImport();
    pp.login();
    pp.NPAsubmit();
    disableSmoothScroll();
    cy.get("#name", { timeout: 30000 }).type("Test");
    cy.get("#Number", { timeout: 30000 }).type("123");
    cy.get("#vatNumber", { timeout: 30000 }).type("123");
    pp.Address_default();
  });
});

Upvotes: 2

Rosen Mihaylov
Rosen Mihaylov

Reputation: 1427

Considering you are submitting a form mid test it is possible the element isn`t fully loaded. Also type can use force, so I suggest the following changes:

describe("Example Test", function () {
  it("Details1", function () {
    pp.login();
    pp.NPAsubmit();
    cy.get("#name", { timeout: 30000 }).should('be.visible').type("Test");
    cy.get("#Number", { timeout: 30000 }).type("123");
    cy.get("#vatNumber", { timeout: 30000 }).type("123");
    pp.Address_default();
  });
});

class exampleImport {
  login() {
    cy.visit("https://xxx");
    cy.get("#email", { timeout: 30000 })
      .clear()
      .type("[email protected]");
    cy.get("#password").clear().type("example");
    cy.get("button[type=submit]").click();
    cy.url().should("include", "example");
  }
  NPAsubmit() {
    cy.get(":nth-child(3) > .nav-link", { timeout: 30000 }).click();
    cy.get(".btn-primary").click().should('not.exist'); //Or some other assertion you can make for the form to have completed the action
  }
  Address_default() {
    cy.get("#street").scrollIntoView().should("be.visible");
    cy.get("#street").type("Test", {force:true});

    cy.get("#city").scrollIntoView().should("be.visible");
    cy.get("#city").type("Test", {force:true});
    cy.get("#country").select("Uruguay (UY)");
  }
}

export default exampleImport;

Upvotes: 1

Related Questions