Triangle

[[oktatas:web:selenium|< Selenium]] ====== Selenium és Mocha ====== * **Szerző:** Sallai András * Copyright (c) Sallai András, 2023 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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


{
  "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"
  }
}


{
    "server": ["src"]
}


node_modules/

===== A projekt =====


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


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)