Scroll a page

Scroll a page down and assert that its heading has scrolled out of view.

This test opens a page, scrolls down, and asserts that the page heading is no longer visible.

Watch it run

The test

scroll.test.mjs

import { describe, expect, it } from "vitest";
import { TestDriver } from "testdriverai/vitest/hooks";

describe("Scroll Test", () => {
  it("should navigate and scroll down the page", async (context) => {
    const testdriver = TestDriver(context);
    await testdriver.provision.chrome({ url: 'https://www.webhamster.com/' });

    // Click the page so it has focus before scrolling
    const heading = await testdriver.find(
      "The Hamster Dance, large heading at top of page",
    );
    await heading.click();

    // Scroll down
    await testdriver.scroll("down", { amount: 1000 });

    // Assert page is scrolled
    const result = await testdriver.assert("The text 'The Hamster Dance' is not visible on the webpage content. It's ok if it's visible in the tab title.");
    expect(result).toBeTruthy();
  });
});

How it works

• The test clicks the heading first so the page has focus and gets the scroll.
• scroll('down', { amount: 1000 }) scrolls down with the mouse wheel. The default amount is 300.
• The assertion adds an exception (“It’s ok if it’s visible in the tab title”). This stops the AI from counting the tab title as the heading.

Run it

The test is in the TestDriver SDK repository. Clone it, install dependencies, and run the file:

git clone https://github.com/testdriverai/testdriverai
cd testdriverai
npm install
npx vitest run examples/scroll.test.mjs

The test reads your API key from TD_API_KEY. Create a key at console.testdriver.ai/team/api-keys. Then set it in your environment or a .env file.

Related

• scroll()
• assert()