Lokalizowanie elementów za pomocą składni CSS

Link do strony testowej: Testing Playground for Selectors

Lokalizowanie elementów przez By.cssSelector

(.class, #id, div > p, [attr=value] itd.).

  • Najlepiej używać w sytuacjach, gdy id, class, name to za mało.
  • Możesz lokalizować po atrybutach, kombinacjach klas, hierarchii.
  • Świetny do dynamicznych komponentów (np. React, Angular).
  • Nie używaj mega długich ścieżek jak w XPath.
  • Nie myl class z id (# vs .).
ElementCSS SelektorOpis
Przycisk Click Me#clickMePo id
Przycisk Cancel.btn.secondaryPo klasie i drugiej klasie
Pole usernameinput[name='username']Po atrybucie name
Pole hasłainput[type='password']Po typie inputa
Checkboxinput[type='checkbox']Checkboxy
Radio - Maleinput[value='male']Po value
Lista elementów głównychli.list-itemPo klasie listy
Nested list itemul ul li.nestedZagnieżdżone listy
Dropdown selectselect#carSelectPo id i tagu
Link Example.coma[href='https://example.com']Link po href
Komórki tabelitable#dataTable tdWszystkie <td> z tabeli

Lokalizowanie po ID

WebElement btn = driver.findElement(By.cssSelector("#clickMe"));

Lokalizowanie po klasie

WebElement btn = driver.findElement(By.cssSelector(".btn"));

Kombinacja wielu klas

WebElement btn = driver.findElement(By.cssSelector(".btn.primary"));

Atrybuty inputa

// Po typie
WebElement input = driver.findElement(By.cssSelector("input[type='text']"));

// Po name
WebElement input2 = driver.findElement(By.cssSelector("input[name='username']"));

Przycisk typu submit

WebElement submitBtn = driver.findElement(By.cssSelector("input[type='submit']"));

Radio button

WebElement maleRadio = driver.findElement(By.cssSelector("input[type='radio'][value='male']"));

Lista zagnieżdżona

WebElement firstNested = driver.findElement(By.cssSelector("ul ul .nested"));

Link po atrybucie href

WebElement link = driver.findElement(By.cssSelector("a[href='https://example.com']"));

Tabela → tylko komórki <td>

// Znajdź wszystkie komórki <td> w tabeli o id="dataTable"
List<WebElement> cells = driver.findElements(By.cssSelector("table#dataTable td"));

for (WebElement cell : cells) {
    System.out.println("Zawartość komórki: " + cell.getText());
}