getgauge / taiko

A node.js library for testing modern web applications
https://taiko.dev
MIT License
3.56k stars 452 forks source link

Missing TS types for `scrollTo` alignment options and `.api` page for it is ambiguous #2701

Closed bvobart closed 1 year ago

bvobart commented 1 year ago

Describe the bug The TypeScript types for scrollTo are incomplete, they are missing the vertical alignment and horizontal alignment arguments. Additionally, Taiko's .api page for scrollTo is ambiguous regarding the exact options to be used. The parameters list shows:

  * options.blockAlignment - string - Defines vertical alignment. (optional, default 'nearest')
  * options.inlineAligment - string - Defines horizontal alignment. (optional, default 'nearest')

while the example below it shows:

await scrollTo('Get Started',{ alignments: { block: 'center', inline: 'center' }})

There is also no mention of which values are allowed to be used for these alignment options (note also the apparent typo in inlineAligment).

To Reproduce Steps (or script) to reproduce the behavior:

const { storage, openBrowser, goto, scrollTo, closeBrowser } = require('taiko');
(async () => {
    try {
        await openBrowser();
        await goto('https://github.com/getgauge/taiko');

        // per default, scrolls to 'nearest', i.e. the text will be at the bottom of the screen
        await scrollTo("Taiko is a free and open source browser automation tool built by the team behind Gauge from ThoughtWorks.");

        // manually scroll up to top of page

        // using this option as specified in the parameters, correctly scrolls to the text such that it is vertically centred on screen.
        await scrollTo("Taiko is a free and open source browser automation tool built by the team behind Gauge from ThoughtWorks.", { blockAlignment: 'center' });

        // manually scroll up to top of page

        // using this option as specified in the examples, seems to ignore the option and just perform the same thing as specifying no options or an empty options object.
        await scrollTo("Taiko is a free and open source browser automation tool built by the team behind Gauge from ThoughtWorks.", { alignments: { block: 'center' } });

    } catch (error) {
        console.error(error);
    } finally {
        await closeBrowser();
    }
})();

Logs

> .api scrollTo
Scrolls the page to the given element.
The alignment parameters can be overridden, see below.
Tthe possible values reference are available at the https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView .

Parameters:

* selector - selector|string - A selector of an element to scroll to. 
* options - Object -  (optional, default {})
  * options.waitForNavigation - boolean - Wait for navigation after the goto. Default navigationTimeout is 30 seconds to override pass { navigationTimeout: 10000 } in options parameter. (optional, default true)
  * options.waitForEvents - Array<string> - Events available to wait for ['DOMContentLoaded', 'loadEventFired', 'networkAlmostIdle', 'networkIdle', 'firstPaint', 'firstContentfulPaint', 'firstMeaningfulPaint', 'targetNavigated'] (optional, default [])
  * options.navigationTimeout - number - Navigation timeout value in milliseconds for navigation after click. (optional, default 30000)
  * options.waitForStart - number - time to wait for navigation to start. Accepts value in milliseconds. (optional, default 100)
  * options.blockAlignment - string - Defines vertical alignment. (optional, default 'nearest')
  * options.inlineAligment - string - Defines horizontal alignment. (optional, default 'nearest')

Returns: Promise<void> 

Examples:
        await scrollTo('Get Started')
        await scrollTo(link('Get Started'))
        await scrollTo('Get Started',{ alignments: { block: 'center', inline: 'center' }})

Expected behavior Non-ambiguous .api page for scrollTo's alignment options and inclusion of the alignment options in Taiko's TypeScript types

Versions:

> gauge -v
Gauge version: 1.4.3
Commit Hash: f98dd40

Plugins
-------
html-report (4.2.0)
screenshot (0.1.0)
ts (0.1.0)