Using Alsatian with Selenium

Selenium is a great tool to test your web app from a user's perspective.

Setup

Simply install the webdriver

npm install selenium-webdriver --save-dev

with the additional types if you're working with TypeScript

npm install @types/selenium-webdriver --save-dev

Browser drivers

Install the browser driver(s) you'd like to work with (we're just using chrome here).

You can find where to download them here.

Usage

Here's a simple example of an Alsatian Test Fixture that's running some checks on the wiki.

import { Builder, By, Capabilities, WebDriver } from "selenium-webdriver";
import { AsyncTest, AsyncSetupFixture, AsyncTeardownFixture, Expect, TestFixture } from "../../../core/alsatian-core";


@TestFixture("Alsatian Wiki")
export default class AlsatianWikiEndToEndTests {

    private _driver: WebDriver;

    @AsyncSetupFixture
    private async _goToWiki() {
        // create a driver if one hasn't yet been created
        this._driver = new Builder()
                            .withCapabilities(Capabilities.chrome())
                            .build();
        
        // go to the wiki home page
        await this._driver.get("https://github.com/alsatian-test/alsatian/wiki");
    }

    @AsyncTeardownFixture
    private async _tidyUp() {
        // quit the browser so it's not hanging about
        this._driver.quit();
    }

    @AsyncTest("page title is Home")
    public async correctTitle() {
        // get the wiki title
        const title = await this._driver
                                .findElement(By.className("gh-header-title"))
                                .getText();

        // check it contains what we'd expect
        Expect(title).toBe("Home");
    }

    @AsyncTest("everyone gets a nice welcome")
    public async checkContent() {
        // get the wiki body
        const title = await this._driver.findElement(By.id("wiki-body")).getText();

        // check it contains what we'd expect
        Expect(title).toContain("Welcome to the alsatian wiki!");
    }
}

Next steps

Experiment and play! If you're using TypeScript you should get all the info you'll need to explore the possibilities. There also tons of selenium tutorials out there!