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

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztve: 2021, 2022, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== A Selenium =====

A Selenium egy automatikus webalkalmazás tesztelő.

  * https://www.selenium.dev/

{{:oktatas:web:selenium:selenium_osszetevok.png|}}


WebDriver programozható a következő nyelveken:
  * JavaScript
  * Python
  * Java
  * Ruby
  * C#

Ha WebDrivert használunk nincs szükség köztes szerverre, közvetlenül 
kommunikál a böngészővel.


===== JavaScript webdriver =====

Webdriver esetén valamilyen nyelven tesztet írunk. Itt most JavaScript nyelven fogunk tesztet írni.


==== Szükséges szoftverek =====

  * Node.js - https://nodejs.org/
  * Visual Studio Code - https://code.visualstudio.com/

===== A chromedriver =====

A chromedirver egy önálló szerver program. Minden Google Chrome verzióhoz kell egy ugyanolyan verziójú chromedriver. A ChromeDriver 100, csak a 100 verziójú Google Chrome-mal használható.

<note tip>
Ha Node.js-t használunk (mint ebben a leírásban) a letöltést a npm tárolóból is megoldható, és nem szükséges külön szervert futtatni.
</note>

Letöltőhely:
  * https://chromedriver.chromium.org/downloads (2023)

Ha Node.js-t használunk a ChromDriver betölthető Node.js csomagból is. 

Önálló indítás:
<code>
chromedriver
Starting ChromeDriver 100.0.4896.60 (6a5d10861ce8de5fce22564658033b43cb7de047-refs/branch-heads/4896@{#875}) on port 9515
Only local connections are allowed.
Please see https://chromedriver.chromium.org/security-considerations for suggestions on keeping ChromeDriver safe.
ChromeDriver was started successfully.
</code>

Önálló indításhoz a chromedriver parancsot az útvonalba szokták tenni, ekkor a Selenium automatikusan használja.


Más böngészőkhöz:

^  Driver  ^  Böngésző  ^
| ChromeDriver  | Google Chrome |
| GeckoDriver    | Firefox  |
| EdgeDriver     | Microsoft Edge |
| InternetExplorerDriver | IE |

Ezekből nem mindegyik létezik Node.js-hez.


===== Teszt létrehozása =====

Hozzuk létre az első tesztünket.

<code>
mkdir app01
cd app01
code .
</code>


VSCode terminálban:
  npm init -y

Telepítsük a selenium-webdriver és chromedriver csomagokat. 
<code>
npm i selenium-webdriver --save-dev
npm i chromedriver --save-dev
</code>

De ha az aktuális Chrome verzió 112, akkor:
<code>
npm i --save-dev chromedriver@112
</code>



Chrome-t használunk a példában. A Firefoxhoz a geckodriver csomag szükséges.


<code javascript index.js>
//A Builder, By és Key objektumokra van szükségünk:
const {Builder, By, Key} = require("selenium-webdriver");

//Ezt a szervert csak betöltjük:
require('chromedriver');

async function szitTest() {
    let driver = await new Builder().forBrowser("chrome").build();
    await driver.get("https://szit.hu");
    await driver.findElement(
        By.name("q"))
        .sendKeys("selenium", Key.RETURN);
}
szitTest();
</code>


Futtassuk a tesztet:
  node index


A teszt keres egy olyan input elemet, amelynek a name értéke "q".
Ebbe beírja, hogy selenium, majd elküldi a kérést.



===== Azonosítás =====

<code php login.php>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Példa</h1>

    <form action="" method="post">
        <input type="text" name="user"><br>
        <input type="password" name="pass"><br>
        <button type="submit" id="loginButton">Mehet</button>
        

    </form>

    <?php 
        if ("" == trim(empty($_POST['user']))) {
            echo "Felhasználó: " . $_POST['user'];
        }
        if ("" == trim(empty($_POST['pass']))) {
            echo "<br>Jelszó: " . $_POST['pass'];
        }
    ?>

</body>
</html>
</code>

Futtassuk:
  php -S localhost:8000 -t .



==== Teszt ====

<code javascript index.js>
const {Builder, By} = require("selenium-webdriver");
require('chromedriver');
async function loginTest() {
    let driver = await new Builder().forBrowser("chrome").build();
    
    await driver.get("http://localhost:8000");
    await driver.findElement( By.name("user")).sendKeys('janos');
    await driver.findElement( By.name("pass")).sendKeys('titok');
    await driver.findElement( By.id("loginButton")).click();
}
loginTest();
</code>

==== Futtatás ====

  node index

===== Triangle tesztelése =====

GitHubon:
  * https://github.com/oktat/extriangle_selenium.git


==== Node.js projekt ====

<code javascript package.json>
{
  "name": "app33",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "node test/index.js",
    "start": "lite-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chromedriver": "^111.0.0",
    "lite-server": "^2.6.1",
    "selenium-webdriver": "^4.8.1"
  }
}

</code>

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


==== Az alkalmazás ====


A Triangle területszámító program háromszög számára.
Bemenő paraméterek az alap és a magasság.

<code html 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 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', () => {
        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>


==== A teszt ====

<code javascript test/index.js>
const { Builder, By, Key, until } = require("selenium-webdriver");
require('chromedriver');

async function triangleTest() {
    let driver = await new Builder().forBrowser("chrome").build();
    await driver.get('http://localhost:3002');
    await driver.findElement(By.id('base')).sendKeys('30');
    await driver.findElement(By.id('height')).sendKeys('35');
    await driver.findElement(By.id('calcButton')).click();
    const areaInput = await driver.findElement(By.id('area')).getAttribute('value');
    console.log(areaInput)
    await driver.close();
}
triangleTest();

</code>


===== Input elem tartalma =====

<code javascript test/index.js>
const { Builder, By, Key, until } = require("selenium-webdriver");
require('chromedriver');
async function triangleTest() {
    let driver = new Builder().forBrowser("chrome").build();
    driver.get('http://localhost:3002');
    driver.findElement(By.id('base')).sendKeys('30');
    driver.findElement(By.id('height')).sendKeys('35');
    driver.findElement(By.id('calcButton')).click();
    const areaInput = await driver.findElement(By.id('area')).getAttribute('value');
    console.log(areaInput)
    driver.close();
}
triangleTest();

</code>


<code javascript test/index.js>
const { Builder, By, Key, until } = require("selenium-webdriver");
require('chromedriver');

function triangleTest() {
    let driver = new Builder().forBrowser("chrome").build();
    driver.get('http://localhost:3002');
    driver.findElement(By.id('base')).sendKeys('30');
    driver.findElement(By.id('height')).sendKeys('35');
    driver.findElement(By.id('calcButton')).click();
    const areaPromise = driver.findElement(By.id('area')).getAttribute('value');
    areaPromise.then(res => console.log(res));
    driver.close();
}
triangleTest();
</code>

A getAttribute() egy Promise-t ad vissza, így vagy futtatjuk rajta a then() függvényt, 
vagy használjuk a async-await párost.

===== Az xpath használata =====

<code javascript test/index.js>
const { Builder, By} = require('selenium-webdriver')
const url = 'http://localhost:3000'

function test01() {
    let driver = new Builder().forBrowser('chrome').build()
    driver.get(url)
    let baseInput = driver.findElement(By.xpath('//input[@id="base"]'))
    baseInput.sendKeys('30')
    let heightInput = driver.findElement(By.xpath('//input[@id="height"]'))
    heightInput.sendKeys(('35'))
    let calcButton = driver.findElement(By.xpath('//button[@id="calcButton"]'))
    calcButton.click()

    let areaInput = driver.findElement(By.xpath('//input[@id="area"]'))
    let areaPromise = areaInput.getAttribute('value')
    areaPromise.then(res => console.log(res))
    

}
test01()
</code>

A <nowiki>//</nowiki> után jön a keresett HTML elem neve. A @ után jön az attribútum, majd 
az egyenlőség jel után a érték.


===== Jelölőnégyzet =====

<code html>
<input type="checkbox" id="jarmu">
</code>

<code javascript test/index.js>
const { Builder, By } = require('selenium-webdriver')
const url = 'http://localhost:3000'

async function test01() {
    let driver = new Builder().forBrowser('chrome').build()
    driver.get(url)
    let res = await driver.findElement(By.id('jarmu')).isSelected()
    console.log(res)
}
test01()
</code>

Az eredmény false

Ha be van állítva:

<code html>
<input type="checkbox" id="jarmu" checked>
</code>

Az eredmény true

===== Gyakorló =====

  * https://szit.hu/d/dreg/

===== Linkek =====
  * https://www.javatpoint.com/selenium-tutorial (2023)