A Selenium WebDriver lehetővé teszi az automatizált böngészőtesztelést, beleértve az interakciókat különböző webes elemekkel. Az alábbi műveletek használhatók a tesztelés során:
Click (kattintás) – Egy adott gomb vagy interaktív elem aktiválása, gyakorlatilag bármire lehet alkalmazni.
Select (opció kiválasztása) – Egy legördülő listából történő kiválasztás. Lehet multi select is.
Send Keys (szövegbevitel) – Szöveg beírása beviteli mezőkbe vagy keresősávokba.
Clear (mező törlése) – Beviteli mező tartalmának törlése.
Submit (űrlap elküldése) – Egy űrlap beküldése egy kapcsolódó gomb vagy mező használatával.
Példa
Egy React űrlapot fogunk kitölteni, illetve alaphelyzetbe állítani ebben a példában.
Urlap.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import React, { useState } from "react"; const SeleniumTestForm = () => { const [inputValue, setInputValue] = useState(""); const [selectedOption, setSelectedOption] = useState("option1"); return ( <div className="p-4 max-w-md mx-auto border rounded-lg shadow-md"> <h2 className="text-xl font-bold mb-4">Selenium WebDriver Interakciók</h2> <form id="test-form"> <label htmlFor="input-field" className="block font-medium mb-2">Szöveg:</label> <input type="text" id="input-field" value={inputValue} onChange={(e) => setInputValue(e.target.value)} className="w-full p-2 border rounded mb-4" /> <button type="button" id="clear-button" onClick={() => setInputValue("")} className="px-4 py-2 bg-red-500 text-white rounded-md mr-2" > Törlés </button> <label htmlFor="dropdown" className="block font-medium mb-2">Válassz!</label> <select id="dropdown" value={selectedOption} onChange={(e) => setSelectedOption(e.target.value)} className="w-full p-2 border rounded mb-4" > <option value="option1">1. lehetőség</option> <option value="option2">2. lehetőség</option> <option value="option3">3. lehetőség</option> </select> <button type="submit" id="submit-button" className="w-full px-4 py-2 bg-blue-500 text-white rounded-md" > Elküldés </button> </form> </div> ); }; export default SeleniumTestForm; |
Teszt.cjs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
const { Builder, By, Key, until } = require("selenium-webdriver"); (async function seleniumTest() { let driver = await new Builder().forBrowser("chrome").build(); try { console.log("Teszt indítása..."); // 1. Nyisd meg a React alkalmazást await driver.get("http://localhost:5173"); console.log("Oldal betöltve."); // 2. Várd meg, hogy az űrlap betöltődjön await driver.wait(until.elementLocated(By.id("test-form")), 5000); console.log("Űrlap betöltődött."); // 3. Keress rá az input mezőre és írj bele szöveget let inputField = await driver.findElement(By.id("input-field")); await inputField.sendKeys("Hello, Selenium!"); console.log("Szöveg beírva az input mezőbe."); // 4. Várj egy kicsit, majd töröld a mezőt await driver.sleep(1000); await inputField.clear(); console.log("Input mező törölve."); // 5. Válassz ki egy másik opciót a legördülő menüből let dropdown = await driver.findElement(By.id("dropdown")); await dropdown.sendKeys("3. lehetőség"); console.log("Legördülő menüből a 3. lehetőség kiválasztva."); await driver.sleep(2000); // 6. Kattints a submit gombra let submitButton = await driver.findElement(By.id("submit-button")); await submitButton.click(); console.log("Submit gomb megnyomva."); // 7. Várj egy kicsit, hogy látható legyen az eredmény await driver.sleep(2000); console.log("A teszt sikeresen lefutott."); } finally { // 8. Zárd be a böngészőt await driver.quit(); } })(); |