Triangle

[[oktatas:web:selenium|< Selenium]] ====== Selenium és Jasmine ====== * **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 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


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


{
    "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 ===== npx jasmine init


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


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: * https://github.com/oktat/msg.git * https://github.com/oktat/msg.git 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


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

npx jasmine init


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

==== Teszt ====


mkdir test




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