scrollToPosition(options)

🚧

This is a TDK feature

This is not supported in Testim's visual editor

Scrolls to a given absolute x/y position on the page or relative to an element.

  • options {object}
  • x {number} absolute x position
  • y {number} absolute y position
  • scrollTarget {string} CSS selector for the element we scroll on, by default body
  • returns: Promise that fulfills when the action is complete.

For example:

// ✅ scroll to x,y position (100,100) relative to the page 
await scrollToPosition({
  x: 100,
  y: 100,
});
// ✅ scroll to 100 pixels inside a scrollable target 
await scrollToPosition({
  x: 100,
  y: 100,
  scrollTarget: '.my-scrollable-div'
});

// ❌ missing x/y
await scrollToPosition({
  scrollTarget: '.my-scrollable-div'
});

// ❌ target not scrollable
await scrollToPosition({
  y: 100,
  scrollTarget: 'head'
});

Full Example

'use strict';

const { expect } = require('chai');
const { go, test, scrollToPosition, text, describe, waitForElement, evaluate } = require('testim');
const scrollValueSelector = '#s';

describe("scrollToPosition", () => {
    test("scroll on body", async () => {
        await go('http://jsbin.testim.io/sed/1');
        waitForElement(scrollValueSelector);
        const scrolledBefore = await text(scrollValueSelector);
        expect(scrolledBefore).to.equal("scrollTop = 8");
        await scrollToPosition(0, 50);
        const scrolled = await text(scrollValueSelector);
        expect(scrolled).to.be.equal("scrollTop = -42");
    });

    test("scroll on element", async () => {
        await go('http://jsbin.testim.io/caf/3');
        const scrolledBefore = await evaluate(() => document.querySelector("#scrollable-to").parentElement.scrollTop);
        expect(scrolledBefore).to.equal(0);
        await scrollToPosition(0, 50, {scrollTarget: 'body > div'});
        const scrolled = await evaluate(() => document.querySelector("#scrollable-to").parentElement.scrollTop);
        expect(scrolled).to.be.above(1);
    });
});