Selenium WebDriver – locators

A Selenium WebDriver egy nyílt forráskódú eszköz, amelyet webalkalmazások tesztelésének automatizálására használnak. Lehetővé teszi a fejlesztők és tesztelők számára, hogy szimulálják a felhasználói interakciókat a webböngészőkkel. Képes szimulálni például kattintásokat, szövegbevitelt, navigációt és űrlapok kitöltését.
A Selenium WebDriver lokátorokat (locators) használ arra, hogy azonosítsa és kezelje az elemeket egy weboldalon.
Támogatja a legnépszerűbb böngészőket, mint a Chrome, Firefox, Safari, Edge és Internet Explorer. Lehetővé teszi tesztek írását különböző programozási nyelveken, pl.: Python, C#, JavaScript, PHP.

Selenium WebDriver dokumentáció

Selenium lokátorok

ID (Azonosító)

Az egyik leggyorsabb és legmegbízhatóbb módszer egy elem kiválasztására. Ha az id dinamikus, akkor nem használható.
A driver.FindElement(By.Id(„username”)) egy IWebElement objektumot ad vissza, amely egy adott weboldalelemre mutat.

IWebElement keresettElem= driver.FindElement(By.Id("username"));

1	IWebElement keresettElem= driver.FindElement(By.Id("username"));

Name (Név)

Az elemek name attribútumát használja az azonosításra. Ha több elemnek is ugyanaz a neve, akkor a legelsőt választja ki.

IWebElement keresettElem= driver.FindElement(By.Name("email"));

1	IWebElement keresettElem= driver.FindElement(By.Name("email"));

Class Name (Osztálynév)

A class attribútum alapján azonosítja az elemeket.

IWebElement keresettElem= driver.FindElement(By.ClassName("login-btn"));

1	IWebElement keresettElem= driver.FindElement(By.ClassName("login-btn"));

Tag Name (Címkenév)

Az adott HTML tag alapján keres elemeket.

IWebElement keresettElem= driver.FindElement(By.TagName("button"));

1	IWebElement keresettElem= driver.FindElement(By.TagName("button"));

Link Text (Link szövege)

A teljes link szövege alapján találja meg az elemet.

IWebElement keresettElem= driver.FindElement(By.LinkText("Kattints ide"));

1	IWebElement keresettElem= driver.FindElement(By.LinkText("Kattints ide"));

Partial Link Text (Részleges link szöveg)

A link szövegének egy részét használja keresésre.

IWebElement keresettElem= driver.FindElement(By.PartialLinkText("Kattints"));

1	IWebElement keresettElem= driver.FindElement(By.PartialLinkText("Kattints"));

XPath

Az egyik legerősebb módszer, amely az oldal teljes DOM struktúrájában keres.

IWebElement keresettElem= driver.FindElement(By.XPath("//input[@type='text']"));

1	IWebElement keresettElem= driver.FindElement(By.XPath("//input[@type='text']"));

CSS Selector (CSS szelektor)

Az elemek kiválasztására CSS szelektorokat használ.

IWebElement keresettElem= driver.FindElement(By.CssSelector("input[type='text']"));

1	IWebElement keresettElem= driver.FindElement(By.CssSelector("input[type='text']"));

Keresés pontosítása

Az elemek keresésekor előfordulhat, hogy több egyező elemet is találunk. Seleniumban két fő módszer van a több egyező elem kezelésére:
findElement() – első egyező elem keresése (ha nem talál egyet sem, hibaüzenetet ad vissza)
findElements() – minden egyező elem listázása (ha nem talál semmit, üres tömböt ad vissza)

Ezeket tudjuk kombinálni a lokátorokkal.

let gombElso = await driver.findElement(By.className('button-class'));

let gombok = await driver.findElements(By.className('button-class'));
console.log('Talált gombok száma:', gombok.length);

let gombElso = await driver.findElement(By.className('button-class'));

let gombok = await driver.findElements(By.className('button-class'));

console.log('Talált gombok száma:', gombok.length);

Példa

Nézzünk meg egy React példát, amin az összes lokátort le tudjuk tesztelni! A Selenium modult telepíteni kell előtte: npm install selenium-webdriver chromedriver

alap.jsx Ez a jsx fájl egy űrlapot hoz létre, amin ki lehet próbálni a tesztelést.

<div className="p-4 max-w-lg mx-auto">
      <h1 className="text-xl font-bold mb-4">Selenium Lokátorok Tesztoldal</h1>
      <form>
        <label htmlFor="username" className="block">Felhasználónév (ID):</label>
        <input id="username" name="username" type="text" className="border p-2 w-full mb-2" />

        <label htmlFor="email" className="block">E-mail (Name):</label>
        <input name="email" type="email" className="border p-2 w-full mb-2" />

        <button className="login-btn bg-blue-500 text-white p-2 rounded mb-2">Bejelentkezés</button>
        
        <p className="link"><a href="#">Kattints ide</a></p>
      </form>
    </div>

<h1 className="text-xl font-bold mb-4">Selenium Lokátorok Tesztoldal</h1>

<form>

<label htmlFor="username" className="block">Felhasználónév (ID):</label>

<button className="login-btn bg-blue-500 text-white p-2 rounded mb-2">Bejelentkezés</button>

<p className="link"><a href="#">Kattints ide</a></p>

</form>

</div>

teszt.cjs Ez a fájl tartalmazza a tesztet. Futtatása: node teszt.cjs

const { Builder, By, until } = require('selenium-webdriver');

(async function testLocators() {
    let driver = await new Builder().forBrowser('chrome').build();
    try {
        await driver.get('http://localhost:5173');

        // ID 
        let username = await driver.findElement(By.id('username'));
        console.log('ID lokátor sikeres:', !!username);

        // Name 
        let email = await driver.findElement(By.name('email'));
        console.log('Name lokátor sikeres:', !!email);

        // Class 
        let loginButton = await driver.findElement(By.className('login-btn'));
        console.log('Class Name lokátor sikeres:', !!loginButton);

        // Link Text 
        let linkText = await driver.findElement(By.linkText('Kattints ide'));
        console.log('Link Text lokátor sikeres:', !!linkText);

        // XPath 
        let xpathElement = await driver.findElement(By.xpath("//input[@type='text']"));
        console.log('XPath lokátor sikeres:', !!xpathElement);

        // CSS Selector 
        let cssElement = await driver.findElement(By.css("input[type='email']"));
        console.log('CSS Selector lokátor sikeres:', !!cssElement);

    } finally {
        await driver.quit();
    }
})();

const { Builder, By, until } = require('selenium-webdriver');

(async function testLocators() {

let driver = await new Builder().forBrowser('chrome').build();

try {

await driver.get('http://localhost:5173');

// ID

let username = await driver.findElement(By.id('username'));

console.log('ID lokátor sikeres:', !!username);

// Name

let email = await driver.findElement(By.name('email'));

console.log('Name lokátor sikeres:', !!email);

// Class

let loginButton = await driver.findElement(By.className('login-btn'));

console.log('Class Name lokátor sikeres:', !!loginButton);

// Link Text

let linkText = await driver.findElement(By.linkText('Kattints ide'));

console.log('Link Text lokátor sikeres:', !!linkText);

// XPath

let xpathElement = await driver.findElement(By.xpath("//input[@type='text']"));

console.log('XPath lokátor sikeres:', !!xpathElement);

// CSS Selector

let cssElement = await driver.findElement(By.css("input[type='email']"));

console.log('CSS Selector lokátor sikeres:', !!cssElement);

} finally {

await driver.quit();

}

})();