Page auto scrolls so slowly it fails the test

[vhaubenstricker]

Current behavior

Hello, I had a test that used to work, where I am testing a form by typing in its fields. It used to auto scroll when I did cy.type to the bottom of the page where the form/field is, but now it scrolls so slowly (if at all) that it fails the test before it finds the field (30 second timeout) and it doesn't even get close to finding it.

If I stop the test while it's searching for the field, then it scrolls down to the bottom of the page. If I use {force: true} then the test works. If I manually scroll down to the bottom of the page as the test is running, then the test works.

Desired behavior

Auto scroll down to the correct element/field at the bottom of the page that I am trying to type into.

Test code to reproduce

context("Aspire Homepage Form on Desktop", () => {
  beforeEach(() => {
    cy.intercept("https://api.omappapi.com/**", (req) => req.destroy()).as(
      "Optimizely Blocker"
    );
    cy.intercept("https://targeting.api.drift.com/**", (req) =>
      req.destroy()
    ).as("Drift Blocker");
    cy.intercept("https://bootstrap.api.drift.com/widget_bootstrap/**", (req) =>
      req.destroy()
    ).as("Drift Blocker2");
    cy.viewport(1920, 1080);
    cy.visit("https://www.youraspire.com");
  });

  it("Test type in first name field", () => {
    cy.get("[name=firstname]").type("Test");
  });
});

Cypress Version

13.13.3

Node version

22.7.0

Operating System

Windows

Debug Logs

No response

Other

https://github.com/user-attachments/assets/0b441ff7-1af4-4c23-8f42-f72c200037d9

https://github.com/user-attachments/assets/d35828f8-823a-47f5-9bb9-bebf36c00d6d

[goblinnode]

Have you tried making an assertion on the element before chaining .type? Example: cy.get(element).should('be.visible').type(text)

[jennifer-shehane]

I'm see this error when I run these tests.

@vhaubenstricker Let me just also suggest adding these 3rd party api calls to blockHosts. A LOT of these aren't necessary in development and the performance improved a lot when I blocked some of them. You may find blocking more will help.

  blockHosts: [
    '*.optimizely.com',
    'capture.trackjs.com',
    'analytics.google.com',
    '*.google.com',
    'api.segment.io',
    'metrics.api.drift.com',
  ],

[vhaubenstricker]

Thank you for the fast response!

@goblinnode Thanks for the suggestion, but it didn't seem to make a difference.

@jennifer-shehane Thank you for telling me about blockHosts! I went through and I gradually blocked almost all of the API calls, but it didn't seem to make much of a difference in the page scrolling speed, it's still timing out before it even gets close to the bottom of the page. It's interesting you are seeing that animation error in Cypress, I have not been seeing that error when I've ran this test.

Updated test:

context("Aspire Homepage Form on Desktop", () => {
  beforeEach(() => {
    cy.viewport(1920, 1080);
    cy.visit("https://www.youraspire.com");
  });

  it("Test type in first name field", () => {
    cy.get("[name=firstname]").first().type("Test");
  });
});

Blocking almost everything with blockHosts(though really it might be better to not block anything below api.omappapi, blocking everything below that did lead to one minor error with .should('be.visible')):

blockHosts: [
    "*.optimizely.com",
    "capture.trackjs.com",
    "analytics.google.com",
    "*.google.com",
    "api.segment.io",
    "metrics.api.drift.com",
    "api.omappapi.com",
    "px.ads.linkedin.com",
    "geolocation.onetrust.com",
    "cdn.cookielaw.org",
    "targeting.api.drift.com",
    "event.api.drift.com",
    "smokey.lordofthequietbadgers.com",
    "bootstrap.api.drift.com",
    "customer.api.drift.com",
    "tags.srv.stackadapt.com",
    "secure.adnxs.com",
    "ipv6.6sc.co",
    "c.6sc.co",
    "t.influ2.com",
    "s.clarity.ms",
    "idx.liadm.com",
    "rum-collector-2.pingdom.net",
    "cdn.segment.com",
    "epsilon.6sense.com",
    "api.ipify.org",
    "s.yimg.com",
    "cdn.acsbapp.com",
    "js.callrail.com",
    "servicetitan-dot-com-api.herokuapp.com",
  ],

https://github.com/user-attachments/assets/87803e10-cd58-41af-8158-5a0f945963e3

[vhaubenstricker]

Found a fix to the issue by adding

else if (browser.isHeaded) {
          launchOptions.args.push("--disable-smooth-scrolling");
        }

to my cypress.config.ts setupNodeEventsfunction. The issue was with smooth scrolling in Cypress on the site.