Skip to content

User-oriented Web UI browser tests in JavaScript (Selenide port to JS)

License

Notifications You must be signed in to change notification settings

KnowledgeExpert/selenidejs

Repository files navigation

Build Status Coverage Status NPM Version NPM Downloads Per MonthJoin the chat at https://t.me/selenidejsПрисоединяйся к чату https://t.me/js_for_testing

SelenideJS

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

Table of content

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

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.

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