Tartalomjegyzék

Selenium - JavaScript

< Selenium

Selenium - JavaScript

Szerző: Sallai András
Copyright © 2021, Sallai András
Szerkesztve: 2021, 2022, 2023
Licenc: CC BY-SA 4.0
Web: https://szit.hu

A Selenium

A Selenium egy automatikus webalkalmazás tesztelő.

https://www.selenium.dev/

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ó.

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.

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:

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.

Ö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.

mkdir app01
cd app01
code .

VSCode terminálban:

npm init -y

Telepítsük a selenium-webdriver és chromedriver csomagokat.

npm i selenium-webdriver --save-dev
npm i chromedriver --save-dev

De ha az aktuális Chrome verzió 112, akkor:

npm i --save-dev chromedriver@112

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

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();

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

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>

Futtassuk:

php -S localhost:8000 -t .

Teszt

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();

Futtatás

node index

Triangle tesztelése

GitHubon:

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

Node.js projekt

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

bs-config.json

{
    "server": [
        "src"
    ]
}

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.

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>

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;
}

A teszt

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();

Input elem tartalma

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();

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();

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

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()

A // 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

<input type="checkbox" id="jarmu">

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()

Az eredmény false

Ha be van állítva:

<input type="checkbox" id="jarmu" checked>

Az eredmény true

Gyakorló

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

Linkek

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