KaneAI - World’s First E2E Software Testing Agent.Book a Demo Join TestMu Conference

How to use scrollElement method in taiko

Best JavaScript code snippet using taiko

scroll-behavior-test.js

Source:scroll-behavior-test.js

1// A ScrollBehaviorTest runs a set of ScrollBehaviorTestCases. The only2// ScrollBehaviorTest method that should be called by external code is run().3// Creates a ScrollBehaviorTest with arguments:4// scrollElement - Element being scrolled.5// scrollEventTarget - Target for scroll events for |scrollElement|.6// testsCases - Array of ScrollBehaviorTestCases.7// getEndPosition - Callback that takes a test case and start position, and8//                  returns the corresponding end position (where positions9//                  are dictionaries with x and y fields).10// jsScroll - Callback that takes a test case and executes the corresponding11//            js-driven scroll (e.g. by setting scrollLeft/scrollTop or by12//            calling scroll, scrollTo, or scrollBy). This should assume that13//            scrollElement's scroll-behavior CSS property has already been14//            set appropriately.15function ScrollBehaviorTest(scrollElement,16                            scrollEventTarget,17                            testCases,18                            getEndPosition,19                            jsScroll) {20    this.scrollElement = scrollElement;21    this.scrollEventTarget = scrollEventTarget;22    this.testCases = testCases;23    this.currentTestCase = 0;24    this.getEndPosition = getEndPosition;25    this.jsScroll = jsScroll;26}27ScrollBehaviorTest.prototype.scrollListener = function(testCase) {28    var endReached = (this.scrollElement.scrollLeft == testCase.endX && this.scrollElement.scrollTop == testCase.endY);29    if (endReached) {30        this.testCaseComplete();31        return;32    }33    if (testCase.waitForEnd)34        return;35    // Wait for the animation to start, then instant-scroll to the end state.36    if (this.scrollElement.scrollLeft != testCase.startX || this.scrollElement.scrollTop != testCase.startY) {37        // Instant scroll, and then wait for the next scroll event. This allows38        // the instant scroll to propagate to the compositor (when using39        // composited scrolling) so that the next smooth scroll starts at this40        // position (the compositor always starts smooth scrolls at the current41        // scroll position on the compositor thread).42        this.scrollElement.scrollTo({left: testCase.endX, top: testCase.endY, behavior: "instant"});43        testCase.waitForEnd = true;44    }45};46ScrollBehaviorTest.prototype.startNextTestCase = function() {47    if (this.currentTestCase >= this.testCases.length) {48        this.allTestCasesComplete();49        return;50    }51    var testCase = this.testCases[this.currentTestCase];52    if (testCase.pageScaleFactor && window.internals) {53        internals.setPageScaleFactor(testCase.pageScaleFactor);54    }55    var isSmoothTest = (testCase.js == "smooth" || (testCase.css == "smooth" && testCase.js != "instant"));56    this.asyncTest = async_test("Scroll x:" + testCase.x + ", y:" + testCase.y + ", smooth:" + isSmoothTest);57    var currentPosition = {};58    currentPosition.x = this.scrollElement.scrollLeft;59    currentPosition.y = this.scrollElement.scrollTop;60    var endPosition = this.getEndPosition(testCase, currentPosition);61    testCase.setStartPosition(currentPosition);62    testCase.setEndPosition(endPosition);63    this.scrollElement.style.scrollBehavior = testCase.css;64    this.jsScroll(testCase);65    var scrollElement = this.scrollElement;66    if (isSmoothTest) {67        this.asyncTest.step(function() {68            assert_equals(scrollElement.scrollLeft + ", " + scrollElement.scrollTop, testCase.startX + ", " + testCase.startY);69        });70        if (scrollElement.scrollLeft == testCase.endX && scrollElement.scrollTop == testCase.endY) {71            // We've instant-scrolled. This means we've already failed the assert above, and will never72            // reach an intermediate frame. End the test case now to avoid hanging while waiting for an73            // intermediate frame.74            this.testCaseComplete();75        } else {76            testCase.scrollListener = this.scrollListener.bind(this, testCase);77            this.scrollEventTarget.addEventListener("scroll", testCase.scrollListener);78        }79    } else {80        this.asyncTest.step(function() {81            assert_equals(scrollElement.scrollLeft + ", " + scrollElement.scrollTop, testCase.endX + ", " + testCase.endY);82        });83        this.testCaseComplete();84    }85}86ScrollBehaviorTest.prototype.testCaseComplete = function() {87    var currentScrollListener = this.testCases[this.currentTestCase].scrollListener;88    if (currentScrollListener) {89        this.scrollEventTarget.removeEventListener("scroll", currentScrollListener);90    }91    this.asyncTest.done();92    this.currentTestCase++;93    this.startNextTestCase();94}95ScrollBehaviorTest.prototype.run = function() {96    setup({explicit_done: true, explicit_timeout: true});97    this.startNextTestCase();98}99ScrollBehaviorTest.prototype.allTestCasesComplete = function() {100    done();101}102// A ScrollBehaviorTestCase represents a single scroll.103//104// Creates a ScrollBehaviorTestCase. |testData| is a dictionary with fields:105// css - Value of scroll-behavior CSS property.106// js - (optional) Value of scroll behavior used in javascript.107// x, y - Coordinates to be used when carrying out the scroll.108// waitForEnd - (must be provided for smooth scrolls) Whether the test runner should109//              wait until the scroll is complete, rather than only waiting until110//              the scroll is underway.111// pageScaleFactor - (optional) if set, applies pinch-zoom by the given factor.112function ScrollBehaviorTestCase(testData) {113    this.js = testData.js;114    this.css = testData.css;115    this.waitForEnd = testData.waitForEnd;116    this.x = testData.x;117    this.y = testData.y;118    this.pageScaleFactor = testData.pageScaleFactor;119}120ScrollBehaviorTestCase.prototype.setStartPosition = function(startPosition) {121    this.startX = startPosition.x;122    this.startY = startPosition.y;123}124ScrollBehaviorTestCase.prototype.setEndPosition = function(endPosition) {125    this.endX = endPosition.x;126    this.endY = endPosition.y;...

WindowScroller.js

Source:WindowScroller.js

...59    this.__handleWindowScrollEvent = this.__handleWindowScrollEvent.bind(this);60    this.__resetIsScrolling = this.__resetIsScrolling.bind(this);61  }62  // Canât use defaultProps for scrollElement without breaking server-side rendering63  get scrollElement() {64    return this.props.scrollElement || window;65  }66  updatePosition(scrollElement) {67    const { onResize } = this.props;68    const { height, width } = this.state;69    scrollElement = scrollElement || this.props.scrollElement || window;70    const offset = getPositionOffset(ReactDOM.findDOMNode(this), scrollElement);71    this._positionFromTop = offset.top;72    this._positionFromLeft = offset.left;73    const dimensions = getDimensions(scrollElement);74    if (height !== dimensions.height || width !== dimensions.width) {75      this.setState({76        height: dimensions.height,77        width: dimensions.width...

Using AI Code Generation

1const { scrollElement, openBrowser, goto, closeBrowser } = require('taiko');2(async () => {3    try {4        await openBrowser();5        await scrollElement("#iframeResult", {x: 0, y: 100});6    } catch (e) {7        console.error(e);8    } finally {9        await closeBrowser();10    }11})();

Using AI Code Generation

1scrollElement("div", {down: 1, left: 1, right: 1, up: 1});2scrollElement("div", {down: 1, left: 1, right: 1, up: 1});3scrollElement("div", {down: 1, left: 1, right: 1, up: 1});4scrollElement("div", {down: 1, left: 1, right: 1, up: 1});5scrollElement("div", {down: 1, left: 1, right: 1, up: 1});6scrollElement("div", {down: 1, left: 1, right: 1, up: 1});7scrollElement("div", {down: 1, left: 1, right: 1, up: 1});8scrollElement("div", {down: 1, left: 1, right: 1, up: 1});9scrollElement("div", {down: 1, left: 1, right: 1, up: 1});10scrollElement("div", {down: 1, left: 1, right: 1, up: 1});11scrollElement("div", {down: 1, left: 1, right: 1, up: 1});12scrollElement("div", {down: 1, left: 1, right: 1, up: 1

Using AI Code Generation

1const { scrollElement } = require('taiko');2(async () => {3    try {4        await scrollElement('Test', { up: 1, down: 1, left: 1, right: 1 });5    } catch (error) {6        console.error(error);7    }8})();

Using AI Code Generation

1await page.evaluate((selector, x, y) => {2  const element = document.querySelector(selector);3  element.scrollBy(x, y);4await page.evaluate((selector, x, y) => {5  const element = document.querySelector(selector);6  element.scrollBy(x, y);7await page.evaluate((selector, x, y) => {8  const element = document.querySelector(selector);9  element.scrollBy(x, y);10await page.evaluate((selector, x, y) => {11  const element = document.querySelector(selector);12  element.scrollBy(x, y);

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.