Hướng dẫn css selectors cheat sheet selenium - css selectors cheat sheet selenium

Tự động hóa trình duyệt yêu cầu điều hướng thông qua các yếu tố của các trang HTML / XML để tự động hóa các chức năng của nó để tự động hóa thử nghiệm trang web. Các khung như Selenium sử dụng các bộ chọn CSS để xác định các yếu tố web và thực hiện các chức năng cần thiết để thử nghiệm. Tờ Cheat Bộ chọn nâng cao CSS toàn diện này thảo luận về các loại bộ chọn CSS khác nhau và cách sử dụng chúng ở định dạng nhanh. requires navigation through the elements of HTML / XML pages to automate its functions for website test automation. Frameworks like Selenium use CSS Selectors to identify web elements and perform the required functions for testing. This comprehensive CSS Advanced Selectors Cheat Sheet discusses various types of CSS Selectors and how to use them in a quick-to-read format.

Bộ chọn CSS là gì?

Bộ chọn/Trình định vị liên quan đến việc xác định phần tử HTML để thực hiện các hành động bằng các công cụ tự động hóa như Selenium và Cypress. Các bộ chọn CSS đi vào hình ảnh khi bạn cần chọn một phần tử dựa trên thông tin bảng kiểu.

Có rất nhiều bộ chọn CSS có sẵn, cho phép độ chính xác hạt mịn khi chọn các yếu tố.

Các loại bộ chọn CSS

Bộ chọn CSS có thể được nhóm lại thành các danh mục dưới đây:

• Bộ chọn cơ bản
• Nhóm chọn lọc
• Tổ hợp
• Giả

Bảng chọn bộ chọn CSS cơ bản

Dưới đây là biểu diễn bảng của các bộ chọn CSS cơ bản:

Tấm cheat css css selectors nâng cao

Dưới đây là biểu diễn bảng của các bộ chọn CSS nâng cao như bộ chọn nhóm, bộ kết hợp và giả:

1. Nhóm chọn lọc

Lớp

Tấm cheat css css selectors nâng cao

Lớp

Bộ chọn này được sử dụng khi chúng ta cần chọn các yếu tố dựa trên tên lớp của họ.

1. Chúng ta cần sử dụng dấu chấm. theo sau là tên lớp để viết biểu thức nàyBrowserStack demo application
2. $$ ("Sắp xếp")
3. TÔI
4. Bộ chọn này được sử dụng khi chúng ta cần chọn các phần tử dựa trên ID & NBSP của nó;

Chúng ta cần sử dụng băm ăn##theo sau là giá trị ID để viết biểu thức này

$$ (Cung cấp##Cung cấp))

1. Thuộc tínhBrowserStack demo application 
2. Bộ chọn này được sử dụng khi chúng ta cần chọn các phần tử dựa trên các thuộc tính của nó
3. Chúng ta cần sử dụng giá trị khóa thuộc tính của bên trong dấu ngoặc vuông [ATT = value]Combinators >> Descendant category

Prerequisites:

1. $$.TestNG dependency to the project
2. Tấm cheat css css selectors nâng caoSelenium dependency to the project
3. Dưới đây là biểu diễn bảng của các bộ chọn CSS nâng cao như bộ chọn nhóm, bộ kết hợp và giả:setProperty method.

1. Nhóm chọn lọc

package com.testng.selenium.v1;

import java.io.File;
import java.time.Duration;
import java.util.NoSuchElementException;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.FluentWait;
import org.openqa.selenium.support.ui.Select;
import org.openqa.selenium.support.ui.Wait;
import org.testng.annotations.AfterTest;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;


public class SeleniumTestngTest {
WebDriver driver;

@BeforeTest
public void initDriver() {
String path = System.getProperty("user.dir") + File.separator + "driver" + File.separator
+ "chromedriver";
System.setProperty("webdriver.chrome.driver", path);
driver=new ChromeDriver();
driver.manage().window().maximize();
}

@Test
public void firstTest () {
driver.get("https://www.bstackdemo.com/");
Wait wait = new FluentWait(driver)
.withTimeout(Duration.ofSeconds(40))
.pollingEvery(Duration.ofSeconds(2))
.ignoring(NoSuchElementException.class);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector(".sort select")));
Select select = new Select(driver.findElement(By.cssSelector(".sort select")));
select.selectByVisibleText("Lowest to highest");
}

@AfterTest
public void tearDown() {
driver.close();
driver.quit();
}

}

Tập đoàn

Bộ chọn này sử dụng hôn mê, để nhóm tất cả các yếu tố chúng ta cần chọnfinding elements with XPath, the CSS selector targets specific elements in the DOM with its styling and attribute information.

Bộ chọn này hữu ích khi chúng ta cần nhóm các yếu tố và chọn chúng trong một thao tác

Sử dụng các bộ chọn CSS với Selenium, bạn có thể tự động hóa các yếu tố khác nhau trên các trang HTML để thử nghiệm các ứng dụng web.CSS Selectors with Selenium, you can automate various elements on the HTML pages for testing web applications.

Chúng ta có thể sử dụng bộ chọn CSS trong selen không?

Bộ chọn CSS trong selen với ví dụ là gì?

5 bộ chọn trong CSS là gì?

4 bộ chọn CSS là gì?