Selenium és Mocha

Szerző: Sallai András
Copyright © Sallai András, 2023
Licenc: CC Attribution-Share Alike 4.0 International
Web: https://szit.hu

Bevezetés

A Selenium tesztet Mocha tesztbe ágyazva futtatjuk, mellette a chai-t használjuk.

A Mocha csak assert típusú állításokat támogat. A chai segítségével használhatunk expect típusú állításokat is.

A megvalósított projekt elérhető a GitHubon a következő helyen:

https://github.com/oktat/extriangle_selenium_mocha_chai.git

Projekt kezdése

mkdir triangle
cd triangle
npm init -y
 
npm install --save-dev selenium-webdriver
npm install --save-dev chromedriver
npm install --save-dev mocha chai
npm install --save-dev lite-server

package.json

{
  "scripts": {
    "test": "mocha test/**/*.js",
    "start": "lite-server"
  },
  "devDependencies": {
    "chai": "^4.3.7",
    "chromedriver": "^111.0.0",
    "lite-server": "^2.6.1",
    "mocha": "^10.2.0",
    "selenium-webdriver": "^4.8.1"
  }
}

bs-config.json

{
    "server": ["src"]
}

.gitignore

node_modules/

A projekt

src/index.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Triangle</title>
</head>
<body>
 
    <div class="container">
        <h1>Triangle</h1>
 
        <div class="triangleForm">
            <div class="mt3">
                <label for="base">Alap</label>
                <input type="text" id="base">
            </div>
            <div class="mt3">
                <label for="height">Magasság</label>
                <input type="text" id="height">
            </div>
            <button id="calcButton">Számít</button>
            <div class="mt3">
                <label for="area">Terület</label>
                <input type="text" id="area">
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

src/app.js

doc = {
    baseInput: document.querySelector('#base'),
    heightInput: document.querySelector('#height'),
    areaInput: document.querySelector('#area'),
    calcButton: document.querySelector('#calcButton')
};
 
window.addEventListener('load', () => {
    init();
});
 
function init() {
    doc.calcButton.addEventListener('click', () => {
        startCalc();
    });
}
 
function startCalc() {
    let base = Number(doc.baseInput.value);
    let height = Number(doc.heightInput.value);
    doc.areaInput.value = calcTriangleArea(base, height);
}
 
function calcTriangleArea(base, height) {
    return base * height / 2;
}

Teszt készítése

mkdir test

test/index.js

const { Builder, By } = require("selenium-webdriver");
const chrome = require('chromedriver');
const expect = require('chai').expect;
const url = 'http://localhost:3000';
 
describe('Háromszög területszámítás', function() {
    var driver = null;
    before(function() {
        driver = new Builder().forBrowser("chrome").build();
    });
    it('30, 35 bemenetre 525 eredmény', async function() {
        await driver.get(url);
        await driver.findElement(By.id('base')).sendKeys('30');
        await driver.findElement(By.id('height')).sendKeys('35');
        await driver.findElement(By.id('calcButton')).click();
        const areaStr = await driver.findElement(By.id('area')).getAttribute('value');
        const area = parseFloat(areaStr);
        expect(area).to.be.closeTo(525, 0.9);
    });
    it('130, 135 bemenetre 8775 eredmény', async function() {
        await driver.get(url);
        await driver.findElement(By.id('base')).sendKeys('130');
        await driver.findElement(By.id('height')).sendKeys('135');
        await driver.findElement(By.id('calcButton')).click();
        const areaStr = await driver.findElement(By.id('area')).getAttribute('value');
        const area = parseFloat(areaStr);
        expect(area).to.be.closeTo(8775, 0.9);
        await driver.quit(); // Utolsó tesztben lezárjuk
    });
});

A Selenium tesztet Mocha teszttel futtatjuk, chai használatával. A to.be.closeTo() függvény használata esetén használható határérték is, második paraméterként. A mocha támaszkodik a this operátorra, ezért nem ajánlott a nyíloperátor használata.

A teszt futtatása

Indítsuk el a weblapot, ha az nem fut:

npm start

Majd a tesztet:

npm test

A futtatásra példa:

npm test

> test
> mocha test/**/*.js



  Háromszög területszámítás
    ✔ 30, 35 bemenetre 525 eredmény (911ms)
    ✔ 130, 135 bemenetre 8775 eredmény (153ms)


  2 passing (1s)