Writing Integration Tests with Selenium & Jest

For writing test cases with Selenium & Jest, we need to make sure that the browser window is correctly initialized before any tests. We can use the beforeAll block to ensure that the browser window is initialized before the tests start executing:

js
Copy code
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let driver = null;

beforeAll(async () => {

    let chromeDriverPath = path.resolve('C:/Users/AIMS TECH/Desktop/twitter-like-application-3/chromedriver.exe');
    let service = new chrome.ServiceBuilder(chromeDriverPath);

    let options = new chrome.Options();
    options.addArguments('--disable-search-engine-choice-screen');
    options.addArguments('--lang=en-GB');

    driver = await new Builder()
        .forBrowser('chrome')
        .setChromeService(service)
        .setChromeOptions(options)
        .build();

});

It's important to define the driver variable outside of this block to ensure that we can access it from the test blocks.

Once the test cases are done executing, we need to make sure the browser window is closed:

js
Copy code
9
1
2
3
afterAll(() => {
    driver.quit();
});

The remainder of the process is very similar to how we would write any other kind of tests, except in this case it would involve the use of methods that control the browser to perform tests. For-example, the following test case registers a new user on our twitter application:

js
Copy code
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
test('users can successfully register', async () => {

    // 1. Go to the login page
    driver.get('http://localhost:3000');

    // 2. Click "Register here" hyperlink
    let registerLink = await driver.findElement(By.id('register-link'));
    registerLink.click();

    // 3. Wait till Registration page is loaded
    await driver.wait(until.elementLocated(By.xpath('/html/body/div/h1')));
    let h1Element = driver.findElement(By.xpath('/html/body/div/h1'));
    await driver.wait(until.elementTextIs(h1Element, 'Register'));

    // 4. Enter "testuser1" in username field
    let usernameField = await driver.findElement(By.id('username-input'));
    usernameField.sendKeys("testuser1");

    // 5. Enter "examplePassword123" in password field
    let passwordField = await driver.findElement(By.id('password-input'));
    passwordField.sendKeys("examplePassword123");

    // 6. Click "Register"
    let registerBtn = await driver.findElement(By.id('register-btn'));
    registerBtn.click();

    // 7. Verify that the user is redirected to the Login page
    await driver.wait(until.elementLocated(By.xpath('/html/body/div/h1')));
    h1Element = driver.findElement(By.xpath('/html/body/div/h1'));

    expect(await h1Element.getText()).toBe("Login");

}, 10000);

In the above code, the timeout value for this test case is manually set to 10000 or 10 seconds because Selenium test cases can potentially take longer than the default 5000 (5 seconds) timeout.

It is important to note that the test cases must contain at least one assertion, also known as an expect statement. The success or failure of the test case are decided by the results of the assertions.

Following is the full code of the test script used in the video:

js
Copy code
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
const { Builder, By, until } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const path = require('path');

let driver = null;

beforeAll(async () => {

    let chromeDriverPath = path.resolve('C:/Users/AIMS TECH/Desktop/twitter-like-application-3/chromedriver.exe');
    let service = new chrome.ServiceBuilder(chromeDriverPath);

    let options = new chrome.Options();
    options.addArguments('--disable-search-engine-choice-screen');
    options.addArguments('--lang=en-GB');

    driver = await new Builder()
        .forBrowser('chrome')
        .setChromeService(service)
        .setChromeOptions(options)
        .build();

});

afterAll(() => {
    driver.quit();
});

const sleep = (milliseconds) => {
    return new Promise(resolve => setTimeout(resolve, milliseconds));
};

describe('authentication tests', () => {
    describe('registration system', () => {
        test('users can successfully register', async () => {

            // 1. Go to the login page
            driver.get('http://localhost:3000');

            // 2. Click "Register here" hyperlink
            let registerLink = await driver.findElement(By.id('register-link'));
            registerLink.click();

            // 3. Wait till Registration page is loaded
            await driver.wait(until.elementLocated(By.xpath('/html/body/div/h1')));
            let h1Element = driver.findElement(By.xpath('/html/body/div/h1'));
            await driver.wait(until.elementTextIs(h1Element, 'Register'));

            // 4. Enter "testuser1" in username field
            let usernameField = await driver.findElement(By.id('username-input'));
            usernameField.sendKeys("testuser1");

            // 5. Enter "examplePassword123" in password field
            let passwordField = await driver.findElement(By.id('password-input'));
            passwordField.sendKeys("examplePassword123");

            // 6. Click "Register"
            let registerBtn = await driver.findElement(By.id('register-btn'));
            registerBtn.click();

            // 7. Verify that the user is redirected to the Login page
            await driver.wait(until.elementLocated(By.xpath('/html/body/div/h1')));
            h1Element = driver.findElement(By.xpath('/html/body/div/h1'));

            expect(await h1Element.getText()).toBe("Login");

        }, 10000);
    });

    describe('login system', () => {
        test('users can successfully login with correct credentials', async () => {
            
            // 1. Go to the login page
            driver.get('http://localhost:3000');
            
            // 2. Enter "testuser1" in the username field
            let usernameField = await driver.findElement(By.id('username-input'));
            usernameField.sendKeys('testuser1');
            
            // 3. Enter "examplePassword123" in the password field
            let passwordField = await driver.findElement(By.id('password-input'));
            passwordField.sendKeys('examplePassword123');
            
            // 4. Click "Login"
            let loginBtn = await driver.findElement(By.xpath('/html/body/div/form/button'));
            loginBtn.click();
            
            // 5. Verify that the application takes the user to the welcome page (also known as the dashboard)
            await driver.wait(until.elementLocated(By.xpath('/html/body/div/h1')));

            let h1Element = driver.findElement(By.xpath('/html/body/div/h1'));
            let h1Text = await h1Element.getText();

            expect(h1Text).toBe('Welcome, testuser1');
        });

    }, 10000);
});