CÁCH LẤY XPATH VÀ CSS CHO SCRIPT AUTOMATION - hidemium

Chào cả nhà! Có lẽ mọi người đã nhận thấy rằng việc sử dụng Automation Hidemium đang trở nên phổ biến hơn bao giờ hết. Tuy nhiên, không ít người mới bắt đầu trong lĩnh vực này và gặp khó khăn trong việc lấy các phần tử (element) để sử dụng trong kịch bản (script).

Thường thì, phương pháp truyền thống là nhấp chuột phải và chọn “inspect” hoặc sử dụng phím F12 để mở cửa sổ kiểm tra (Inspect Element), sau đó bạn chọn “copy selector” dựa trên gợi ý của trình duyệt hoặc sử dụng các tiện ích mở rộng như “find selector”. Tuy nhiên, sau một thời gian sử dụng, bạn có thể thấy rằng các phần tử của bạn thường xuyên gặp sự cố và không thể thực hiện thao tác trên chúng, dẫn đến lỗi trong việc chạy script.

Nguyên nhân chính là cấu trúc của trang web đã thay đổi, làm cho selector cũ không còn hiệu quả nữa. Để tránh tình trạng phải chỉnh sửa liên tục script Automation do vấn đề này gây ra, hãy để tôi hướng dẫn bạn một số mẹo để lấy phần tử một cách chính xác hơn và tránh tình trạng thất bại thường xuyên.

1.Theo ID

Xpath: ID của một phần tử có thể được xác định bằng cú pháp [@id=’idName’]. Ví dụ, nếu bạn muốn chọn một phần tử div có ID là ‘panel’, bạn có thể sử dụng Xpath như sau: //div[@id=’panel’].

CSS Selector: ID của phần tử có thể được chọn bằng cú pháp #idName. Ví dụ, để chọn phần tử div có ID là ‘panel’ bằng CSS Selector, bạn có thể sử dụng: div#panel.

2. Theo class

• Khi bạn muốn chọn một phần tử dựa trên class, bạn cần biết cách viết mã Xpath và CSS cho nó.
• Trong Xpath, bạn sử dụng cú pháp [@class=’className’] để chọn phần tử theo class. Ví dụ: //div[@class=’panelClass’] sẽ chọn một phần tử div có class là ‘panelClass’.
• Trong CSS Selector, để chọn phần tử theo class, bạn sử dụng dấu chấm . theo sau là tên class. Ví dụ: div.panelClass sẽ chọn một phần tử div có class là ‘panelClass’.

Nếu một phần tử có nhiều class:

• Trong trường hợp một phần tử có nhiều class, bạn cần chia các class ra và tìm theo từng class riêng.
• Trong Xpath, bạn nên sử dụng dấu cách để tách các class. Ví dụ: //div[@class=’panelClass1 panelClass2′] sẽ chọn một phần tử div có cả hai class ‘panelClass1’ và ‘panelClass2’.
• Trong CSS Selector, bạn chỉ cần sử dụng dấu chấm . và liệt kê các class cách nhau bằng dấu chấm. Ví dụ: div.panelClass1.panelClass2 sẽ chọn một phần tử div có cả hai class ‘panelClass1’ và ‘panelClass2’.

3. Thuộc tính khác

Để chọn một phần tử dựa trên bất kỳ thuộc tính cụ thể nào của nó, chẳng hạn như thuộc tính “name” của một phần tử div hoặc thuộc tính “type” của một phần tử input, bạn có thể sử dụng cách sau:

-Với Xpath locator:

• Để chọn một phần tử div có thuộc tính “name” là ‘continue’, bạn có thể sử dụng: //div[@name=’continue’].
• Để chọn một phần tử input có thuộc tính “type” là ‘button’, bạn có thể sử dụng: //input[@type=’button’].

-Với CSS selector:

• Để chọn một phần tử div có thuộc tính “name” là ‘continue’, bạn có thể sử dụng: div[name=’continue’].
• Để chọn một phần tử input có thuộc tính “type” là ‘button’, bạn có thể sử dụng: input[type=’button’].

4. Phần tử con ngay cạnh.

-Trong Xpath:

• Để chọn một phần tử con liền kề, bạn sử dụng dấu gạch chéo xuôi //. Ví dụ: //ul/li sẽ chọn tất cả các phần tử li là con liền kề của phần tử ul.

-Trong CSS Selector:

• Để chọn một phần tử con liền kề, bạn sử dụng dấu ngoặc lớn >. Ví dụ: ul > li sẽ chọn tất cả các phần tử li là con liền kề của phần tử ul.

Điều này cho phép bạn lựa chọn các phần tử con ngay bên dưới một phần tử cha cụ thể.

5.Child / subchild

Phần tử con hoặc phần tử “cháu” (phần tử con của phần tử con) được biểu thị bằng hai dấu gạch phải “//” trong Xpath, và dấu cách (“ “) trong CSS Selector. Dưới dây là ví dụ về một child/subchild “li” của phần tử cha “ul”

• Với Xpath locator: //ul//li
• Với  CSS selector: css=ul li

Hãy phân biệt giữa “ul li” và “ul > li” nhé!

6. nth Child

Xpath [n]:

• Trong Xpath, để chọn một phần tử con thứ nth, bạn sử dụng cú pháp [n], trong đó n là số thứ tự của phần tử bạn muốn chọn.

CSS :nth-of-type(n):

• Trong CSS Selector, bạn có thể sử dụng cú pháp :nth-of-type(n) để chọn phần tử con thứ nth của một loại phần tử cụ thể. Nó cũng hoạt động tương tự như Xpath [n].

Giả sử bạn có danh sách các sản phẩm trên một trang web:

Để chọn phần tử “Product 3” trong danh sách sản phẩm, bạn có thể sử dụng Xpath và CSS như sau:

1. Sử dụng Xpath [n]:
   • Xpath: //div[@class=’products’]/div[3] sẽ chọn phần tử “Product 3” trong danh sách sản phẩm.
2. Sử dụng CSS :nth-of-type(n):
   • CSS: div.products div:nth-of-type(3) cũng sẽ chọn phần tử “Product 3” trong danh sách sản phẩm.

Cả hai cách trên đều sẽ giúp bạn chọn phần tử con thứ 3 trong danh sách sản phẩm.

7. Sử dụng Kết hợp điều kiện:

• Bạn có thể kết hợp nhiều điều kiện để tìm phần tử cụ thể. Ví dụ: //input[@type=’text’][@name=’username’] sẽ chọn phần tử input có type là ‘text’ và name là ‘username’.

8. Lưu ý

Để kiểm tra sự tồn tại của một phần tử trên trang web bạn có thể kiểm tra bằng cửa sổ console trong trình duyệt, sử dụng các câu lệnh JavaScript. Dưới đây là cách bạn có thể thực hiện việc này:

document.querySelectorAll(‘your-css-selector’)

Ấn Enter để xem phần tử đó có tồn tại hay không. Nếu không tồn tại thì bạn cần kiểm tra lại element đó.

Hoặc kiểm tra XPath, CSS bằng cách ctrl F trên màn hình dev tool rồi paste element vào đó và kiểm tra.

Ngoài ra chúng tôi khuyến khích người dùng đọc hướng dẫn sử dụng automation để có thể chuẩn bị và tạo được những kịch bản auto dễ dàng hơn.

Mong rằng với kiến thức trên Hidemium có thể giúp các bạn làm việc với automation dễ dàng hơn. Cảm ơn tất cả mọi người đã ủng hộ Hidemium, mọi đóng góp và câu hỏi xin được gửi đến @Hidemium_global trên kênh telegram hoặc inbox trực tiếp đến kênh facebook chính thức , chúng tôi luôn sẵn sàng giúp đỡ.

---

 

Hi all! Perhaps everyone has noticed that using Automation Hidemium is becoming more popular than ever. However, many people are just starting out in this field and have difficulty getting elements to use in scripts.

Usually, the traditional method is to right click and select “inspect” or use the F12 key to open the inspection window (Inspect Element), then you select “copy selector” based on the browser’s suggestion or use extensions like “find selector”. However, after a period of use, you may find that your elements frequently crash and operations cannot be performed on them, leading to errors in running scripts.

The main reason is that the structure of the website has changed, making the old selector no longer effective. To avoid constantly editing Automation scripts caused by this problem, let me show you some tips to get elements more accurately and avoid frequent failures.

1.According to ID

Xpath: The ID of an element can be determined using the syntax [@id=’idName’]. For example, if you want to select a div element whose ID is ‘panel’, you can use the XPath like this: //div[@id=’panel’].

CSS Selector: The element’s ID can be selected using the #idName syntax. For example, to select the div element with ID ‘panel’ using CSS Selector, you can use: div#panel.

2. According to class

When you want to select an element based on class, you need to know how to code XPath and CSS for it.
In XPath, you use the syntax [@class=’className’] to select elements by class. For example: //div[@class=’panelClass’] will select a div element whose class is ‘panelClass’.
In CSS Selector, to select elements by class, you use a dot. followed by the class name. For example, div.panelClass will select a div element whose class is ‘panelClass’.

If an element has multiple classes:

In case an element has multiple classes, you need to divide the classes and search for each class separately.
In XPath, you should use spaces to separate classes. For example: //div[@class=’panelClass1 panelClass2′] will select a div element that has both classes ‘panelClass1’ and ‘panelClass2’.
In CSS Selector, you just need to use dot. and list the classes separated by dots. For example, div.panelClass1.panelClass2 will select a div element that has both classes ‘panelClass1’ and ‘panelClass2’.

3. Other properties

To select an element based on any of its specific properties, such as the “name” property of a div element or the “type” property of an input element, you can use the following:

-With Xpath locator:

To select a div element whose “name” attribute is ‘continue’, you can use: //div[@name=’continue’].
To select an input element whose “type” attribute is ‘button’, you can use: //input[@type=’button’].

-With CSS selector:

To select a div element whose “name” attribute is ‘continue’, you can use: div[name=’continue’].
To select an input element whose “type” attribute is ‘button’, you can use: input[type=’button’].

4. The child element is right next to it.

-In Xpath:

To select an adjacent child element, you use a forward slash //. For example: //ul/li will select all li elements that are adjacent children of the ul element.

-In CSS Selector:

To select an adjacent child element, you use large brackets >. For example, ul > li will select all li elements that are adjacent children of the ul element.

This allows you to select child elements directly below a specific parent element.

5.Child / subchild

Child elements or “grandchild” elements (child elements of child elements) are represented by two right slashes “//” in XPath, and spaces (“ “) in CSS Selector. Below is an example of a child/subchild “li” of parent element “ul”

With Xpath locator: //ul//li
With  CSS selector: css=ul li

Please distinguish between “ul li” and “ul > li”!

6. nth Child

XPath [n]:

In XPath, to select an nth child element, you use the [n] syntax, where n is the number of the element you want to select.

CSS :nth-of-type(n):

In CSS Selector, you can use the :nth-of-type(n) syntax to select the nth child element of a specific element type. It also works similarly to Xpath [n].

Let’s say you have a list of products on a website:

 

Product 1

Product 2

Product 3

Product 4

Product 5

 

To select the “Product 3” element in the product list, you can use XPath and CSS as follows:

Using XPath [n]:
Xpath: //div[@class=’products’]/div[3] will select the “Product 3” element in the product list.
Use CSS :nth-of-type(n):
CSS: div.products div:nth-of-type(3) will also select the “Product 3” element in the product list.

Both of the above methods will help you select the 3rd child element in the product list.

7. Use Condition Matching:

You can combine multiple conditions to find a specific element. For example: //input[@type=’text’][@name=’username’] will select input element with type ‘text’ and name ‘username’.

8. Summary

To check the existence of an element on a web page, you can check with the console window in your browser, using JavaScript commands.

Here’s how you can do this:

document.querySelectorAll(‘your-css-selector’)

Press Enter to see if that element exists or not. If it doesn’t exist, you need to check that element again.

Or check XPath and CSS by ctrl F on the dev tool screen then paste the element there and check.

In addition, we encourage users to read the automation instructions to be able to prepare and create automated scripts more easily.

Hopefully, the knowledge of Hidemium can help you work with automation more easily. Thank you everyone for supporting Hidemium, all contributions and questions should be sent to @Hidemium_global on the telegram channel or inbox directly to the official facebook channel, we are always ready to help.