Document

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


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.


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






    
    
    
    Document


    Példa

    
        

        

        
        

    

    Jelszó: " . $_POST['pass'];
        }
    ?>

Futtassuk: php -S localhost:8000 -t . ==== Teszt ====


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


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


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


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


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


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


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


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


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:

Az eredmény true ===== Gyakorló ===== * https://szit.hu/d/dreg/ ===== Linkek ===== * https://www.javatpoint.com/selenium-tutorial (2023)