szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[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 =====

<code bash>
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
</code>


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


<code javascript 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"
  }
}
</code>

<code javascript bs-config.json>
{
    "server": ["src"]
}
</code>

<code init .gitignore>
node_modules/
</code>


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

<code html 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>
</code>

<code javascript 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;
}
</code>

===== Teszt készítése =====

  npx jasmine init


<code javascript spec/support/jasmine.json>
{
  "spec_dir": "test",
  "spec_files": [
    "**/*[sS]pec.?(m)js"
  ],
  "helpers": [
    "helpers/**/*.?(m)js"
  ],
  "env": {
    "stopSpecOnExpectationFailure": false,
    "random": false
  }
}
</code>

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


<code javascript 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
    });    
});
</code>

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:
<code>
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)
</code>


===== Ü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

<code>
mkdir app01
cd app01
npm install chromedriver@111.0.0
npm install jasmine
npm install selenium-webdriver
</code>


<code javascript package.json>
{
  "scripts": {
    "test": "jasmine"
  },
  "devDependencies": {
    "chromedriver": "^111.0.0",
    "jasmine": "^4.6.0",
    "selenium-webdriver": "^4.9.2"
  }
}
</code>


  npx jasmine init

<code javascript spec/support/jasmine.json>
{
  "spec_dir": "test",
  "spec_files": [
    "**/*[sS]pec.?(m)js"
  ],
  "helpers": [
    "helpers/**/*.?(m)js"
  ],
  "env": {
    "stopSpecOnExpectationFailure": false,
    "random": false
  }
}
</code>


==== Teszt ====

<code>
mkdir test
</code>


<code javascript 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();
    });
});
</code>

  * 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