Tartalomjegyzék

Selenium és Jasmine

Selenium és Jasmine

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 Jasmine tesztbe ágyazva futtatjuk.

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 jasmine
npm install --save-dev lite-server

Ha nem megfelelő selenium-webdriver töltődik le, adjuk meg a verziószámát, például:

npm install --save-dev chromedriver@111.0.0

package.json

{
  "scripts": {
    "test": "jasmine",
    "start": "lite-server"
  },
  "devDependencies": {
    "chromedriver": "^111.0.0",
    "jasmine": "^4.6.0",
    "lite-server": "^2.6.1",
    "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

npx jasmine init

spec/support/jasmine.json

{
  "spec_dir": "test",
  "spec_files": [
    "**/*[sS]pec.?(m)js"
  ],
  "helpers": [
    "helpers/**/*.?(m)js"
  ],
  "env": {
    "stopSpecOnExpectationFailure": false,
    "random": false
  }
}

A spec_dir értékét „test”-re állítottuk, a random értékét false-ra. A false beállításra azért van szükség, mert az utolsó tesztben bezárjuk a teszt böngészőablakot. Ha random futnak a tesztek, nem tudjuk melyik az utolsó. Lemondhatunk az ablak bezárásról, és akkor futhatnak random sorrendben a tesztek.

mkdir test

test/index.spec.js

const { Builder, By } = require("selenium-webdriver");
const chrome = require('chromedriver');
 
const url = 'http://localhost:3000';
const driver = new Builder().forBrowser("chrome").build();
 
describe('Háromszög területszámítás', () => {
    it('30, 35 bemenetre 525 eredmény', async () => {
        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).toBeCloseTo(525, 0.9);
    });
    it('130, 135 bemenetre 8775 eredmény', async () => {
        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).toBeCloseTo(8775, 0.9);
        await driver.close(); // Utolsó tesztben lezárjuk
    });    
});

A Selenium tesztet Jasmine teszttel futtatjuk. A toBeCloseTo() függvény használata esetén használható határérték is, második paraméterként.

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
> jasmine

Randomized with seed 32823
Started
.


1 spec, 0 failures
Finished in 1.066 seconds
Randomized with seed 32823 (jasmine --random=true --seed=32823)

Üzenet

Újabb példa.

Tesztelhető weboldal:

A teszt teljes változata:

https://github.com/oktat/msg_selenium

mkdir app01
cd app01
npm install chromedriver@111.0.0
npm install jasmine
npm install selenium-webdriver

package.json

{
  "scripts": {
    "test": "jasmine"
  },
  "devDependencies": {
    "chromedriver": "^111.0.0",
    "jasmine": "^4.6.0",
    "selenium-webdriver": "^4.9.2"
  }
}

npx jasmine init

spec/support/jasmine.json

{
  "spec_dir": "test",
  "spec_files": [
    "**/*[sS]pec.?(m)js"
  ],
  "helpers": [
    "helpers/**/*.?(m)js"
  ],
  "env": {
    "stopSpecOnExpectationFailure": false,
    "random": false
  }
}

Teszt

mkdir test

test/test.spec.js

 
const { Builder, By } = require("selenium-webdriver");
const chrome = require('chromedriver');
 
const url = 'https://oktat.github.io/msg/';
 
describe('Üzenő', () => {
    var driver = null;
    beforeAll(() => {
        driver = new Builder().forBrowser("chrome").build();
    });
    beforeEach(async () => {
        await driver.get(url);
    });
    it('Egy', async () => {
 
        await driver.findElement(By.id('msg')).sendKeys('Valami');        
        await driver.findElement(By.id('enterButton')).click();
        const text = await driver.findElement(By.className('box')).getText();        
        expect(text).toBe('Valami');
    });
    it('Kettő', async () => {
        await driver.findElement(By.id('msg')).sendKeys('Más');        
        await driver.findElement(By.id('enterButton')).click();
        const text = await driver.findElement(By.className('box')).getText();        
        expect(text).toBe('Más');
    });
    afterAll(() => {
        driver.quit();
    });
});

A beforeAll() függvény egyszer hajtódik végre az összes teszt előtt a blokkban.
A beforeEach() függvény minden teszt előtt végrehajtódik a blokkban.

Futtatás

npm test