selenium-pages
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.2 • Public • Published

    selenium-pages

    npm NPM npms.io (quality) Libraries.io dependency status for latest release Maintenance depends on selenium-webdriver

    selenium-pages is a package for you who want to use selenium and manage some pages with your own classes simply.

    Let's just get started and learn little by little, if needed.

    Installation

    npm install selenium-pages

    for TypeScript, below line may be good too

    npm install -D @types/selenium-webdriver

    Prerequisites

    Web drivers are installed and the paths for the drivers are ready.

    Usage

    Basics

    You can use Selen.Pages.Any class for getting started or lightly use.

    import { Selen } from "selenium-pages";
    
    const pageOptions: Selen.Options = {
      origin: "https://www.google.com", // origin
      homePath: "/" // path of page home
    };
    
    (async () => {
    ///
    
    const driver = await Selen.build("chrome");
    
    const page = new Selen.Pages.Any(driver, pageOptions);
    
    await page.goHome();
    
    console.log(await page.getCurrentUrl());
    
    console.log(await page.getTitle());
    
    await page.goTo("/search?q=test");
    
    console.log(
      await page
        .querySelectorAll("div.g h3")
        .then(
          elements => Promise.all(elements.map(
            element => element.getText()
          ))
        )
    );
    
    await driver.quit();
    
    ///
    })();

    see https://selenium-pages.netlify.app/ for more.

    How to extend the base class

    You can extend Selen.Pages.Base class for your own use.

    import { Selen } from "selenium-pages";
    
    const pageOptions: Selen.Options = {
      origin: "https://www.google.com",
      homePath: "/"
    };
    
    (async () => {
    ///
    
    // customized page class definition
    class Test extends Selen.Pages.Base {
      async workSome(){
        await this.executeScript(`
          document.body.appendChild(document.createElement('div')).innerHTML = "test";
        `);
      }
    }
    
    const testPage = new Test(
      await Selen.build("chrome"),
      pageOptions
    );
    
    await testPage.goHome();
    
    await testPage.workSome();
    
    ///
    })();

    How to use customized options

    You can extend Selen.Options and use it in your class instance methods.

    import { Selen } from "selenium-pages";
    
    type CustomOptions = Selen.Options & {
      some: string;
      testUrl: string;
    };
    
    class Custom extends Selen.Pages.Base<CustomOptions> {
      public async workSome(){
        // your options can be accessed with this.options
        console.log(this.options.some);
    
        // WebDriver can be accessed with this.driver
        await this.driver.get(this.options.testUrl);
      }
    }
    
    const customPage = new Custom(driver, {
      origin: "https://...",
      homePath: "/",
      some: "thing",
      testUrl: "https://.."
    });

    How to use style dictionary

    styleDictionary is ready for you to name the selector strings.

    import { Selen } from "selenium-pages";
    
    class Custom extends Selen.Pages.Base {
      protected initializeStyleDictionary(){
        super.initializeStyleDictionary();
        this.styleDictionary.merge({
          inputBox: "div form input[name='some']",
          button: "div form button[type='submit']"
        });
      }
    }
    
    (async () => {
    ///
    
    const customPage = new Custom(driver, someOptions);
    await customPage.querySelector("inputBox")
      .then(box => box.sendKeys("hello"));
    await customPage.querySelector("button")
      .then(button => button.click());
    
    ///
    })();

    Key can be accessed from Selen.Pages.Base instance as this.Key

    import { Selen } from "selenium-pages";
    
    (async () => {
    ///
    class MyPage extends Selen.Pages.Base {
      public async workSome(text: string){
        await this.querySelector("input[name='something']")
          .then(box => box.sendKeys(text, this.Key.ENTER));
      }
    }
    ///
    })();

    How to bundle customized pages your own

    You can extend Selen.Pages for your own classes to be bundled

    import { Selen } from "selenium-pages";
    
    // define your own classes
    class Custom1 extends Selen.Pages.Base {
      public sayHello(){
        console.log("hi");
      }
    }
    
    class Custom2 extends Selen.Pages.Base {
      public sayBye(){
        console.log("bye");
      }
    }
    
    // bundle your classes
    class MyPages extends Selen.Pages {
      public static Custom1 = Custom1;
      public static Custom2 = Custom2;
    }
    
    // then you can use page classes from MyPages
    const customPage1 = new MyPages.Custom1(driver, options);
    const customPage2 = new MyPages.Custom2(driver, options);
    
    // and the classes defined in base class(Selen.Pages) can be accessed
    const anyPage = new MyPages.Any(driver, options);

    Utilities

    building WebDriver

    Selen.build() returns a Promise for WebDriver instance.

    const driver = await Selen.build("chrome");

    setting environment variable PATH

    Selen.addPath() adds the string into PATH variable.

    Selen.addPath("/path/to/driver");

    Install

    npm i selenium-pages

    DownloadsWeekly Downloads

    1

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    31.9 kB

    Total Files

    23

    Last publish

    Collaborators

    • tomsd