SelenideJS

Wrapper for Selenium WebDriver, which provides testing user-oriented API for writing stable and readable UI tests in JavaScript/TypeScript.

Table of content

• SelenideJS
  • Table of content
  • Prerequisites
  • Installing
  • Usage
  • Quick Start
    • Basic API
    • More advanced tricks
  • More Examples - SelenideJS on top of Selenium Webdriver with Jasmine as test runner (TypeScript version) - SelenideJS on top of Protractor (TypeScript version) - SelenideJS on top of Webdriverio (TypeScript version) - SelenideJS on top of Selenium Webdriver with Toundra as test runner (TypeScript version)
  • Tutorials
    • General - Typescript tutorial - Javascript tutorial
    • How to create custom conditions
  • API Documentation
  • For Contributors
    • Guide
    • Running the tests
      • Prerequisites
    • Run code style test
  • Versioning
  • History & Contributors
  • License

Prerequisites

Nodejs 8+

Installing

Install selenidejs via npm to your project:

npm i --save-dev selenidejs

Usage

Set your webdriver instance:

import { Browser } from 'selenidejs';
const webDriverInstance = ...;
const browser = Browser.configuredWith().driver(webDriverInstance).build();

And you are ready to go!

Quick Start

Basic API

GIVEN

    import { Builder, Capabilities } from 'selenium-webdriver';
    const webdriver = new Builder().withCapabilities(Capabilities.chrome()).build()

WHEN

    import { Browser } from 'selenidejs';

    const browser = Browser.configuredWith()
        .driver(webdriver)
        .baseUrl('https://google.com')
        .timeout(4000)
        .build();

    // OR:
    // browser = Browser.chromeWith().timeout(4000).baseUrl('https://google.com').build();

    // OR:
    // browser = Browser.chrome(); //if you are ok with defaults for baseUrl and timeout

AND

    await browser.open('/ncr');

AND

    // await browser.element('[name=q]')).type('selenium');
    // OR:

    import { by } from 'selenidejs';

    const query = browser.element(by.name('q')); // actual search does not start here, the element is lazy
    await query.type('selenium')                 // here the actual webelement is found
    await query.pressEnter();                    // here the actual webelement is found again

AND

    // in case we need to filter collection of items by some condition like visibility:

    import { be } from 'selenidejs';

    const results = browser.all('.srg .g').by(be.visible);

THEN

    import { have } from 'selenidejs';

    await results.should(have.size(10));
    await results.first.should(have.text('Selenium automates browsers'));

FINALLY

    await browser.quit();

More advanced tricks

    // OR just in case you like the "flow"
    import { find, should } from 'selenidejs';

    await browser.all('.srg .g').should(have.size(10))
        .then(find.first)
        .then(should.match(have.text('Selenium automates browsers')));

---

    // OR:
    import { perform } from 'selenidejs';

    await browser.element(by.name('q')).type('selenium').then(perform.pressEnter);
    
    // OR:
    import { command } from 'selenidejs';

    await browser.element(by.name('q')).type('selenium').then(command.pressEnter);

    // instead of
    const query = browser.element(by.name('q'));
    await query.type('selenium')
    await query.pressEnter();

---

Not sure when you will need it, but just in case:) ...

    import { get } from 'selenidejs';

    const iWillRememberYourTextOnceReady =
        await browser.element('#i-change-my-text-on-hover').hover().then(get.someText)

---

You might think you need something like...

    import { its } from 'selenidejs';

    if (await browser.element('#i-might-say-yes-or-no').get(its.text) === 'yes') {
        // do something...
    }

Or...

    import { their } from 'selenidejs';

    if (await browser.all('.option').get(their.size) >= 2) {
        // do something...
    }

Maybe one day, you really find a use case:) But for above cases, probably easier would be:

    if (await browser.element('#i-might-say-yes-or-no').waitUntil(have.text('yes'))) {
        // do something...
    }
    ...
    if (await browser.all('.i-will-appear').waitUntil(have.sizeGreaterThanOrEqual(2))) {
        // do something...
    }

Or, by using non-waiting versions, if "you are in a rush":)...

    if (await browser.element('#i-might-say-yes-or-no').matching(have.text('yes'))) {
        // do something...
    }
    ...
    if (await browser.all('.i-will-appear').matching(have.sizeGreaterThanOrEqual(2))) {
        // do something...
    }

---

In case you want to be different) ...

   const browser = new Browser(Configuration.withDriver(driver).timeout(4000).build());

More Examples

SelenideJS on top of Selenium Webdriver with Jasmine as test runner (TypeScript version)

SelenideJS on top of Protractor (TypeScript version)

SelenideJS on top of Webdriverio (TypeScript version)

SelenideJS on top of Selenium Webdriver with Toundra as test runner (TypeScript version)

Tutorials

General

You can start with Typescript or Javascript tutorial to get familiar with basic and some advanced features of Selenidejs. Using Typescript is recommended when writing tests (it will enable IDE's autocompletion features, compile-time checks, etc. since Selenidejs itself written in Typescript), but you still can use Javascript.

Typescript tutorial

Javascript tutorial

How to create custom conditions

If you ever need to write custom conditions like button.should(have.matchedText(/.*Continue.*/g)) or collection.should(have.sizeInRange(0, 10)) you might need to add your custom conditions. Detailed howto placed in api docs.

API Documentation

Generated API documentation can be found here.

For Contributors

Guide

Please read contributing for details on our code of conduct, and the process for submitting pull requests to us.

Running the tests

Prerequisites

• google chrome is installed locally

Run unit and integration tests:

npm test

Run code style test

run ts linter:

npm run lint

Versioning

We use npm for versioning. for the versions available, see the npm or github releases.

History & Contributors

The Selenide was originally started to be ported from Java to JavaScript by @yashaka (Iakiv Kramarenko) in the selenejs repository (originally named also as selenidejs).

Then Knowledge Expert picked the Iakiv's race, and under Iakiv's leadership rewrote the initial draft implementation in TypeScript. @alex-popov-tech (Alexander Popov) put main efforts in the beginning to build the first working version.

In Feb 2019, after refining the API and hardening the implementation, the 1.0 version was released.

See the CHANGELOG for details of all further development details and changes.

See also the full list of contributors who participated in this project.

License

this project is licensed under the Apache-2.0 License - see the LICENSE file for details