Selenium Tip & Trick: Locator với CSS và XPATH

Thứ Ba, 14 Tháng Tám 2018 lúc 04:10 CH

Một trong những kỹ năng quan trọng mà một người phát triển các Test Script kiểm thử tự động cần phải có đó là viết các biểu thức Locator nhằm xác định các thành phần (Elements) trên Webpage mà Test Script sẽ tương tác. Việc xác định các biểu thức Locator tốt sẽ mang đến khả năng hoạt động chính xác của Test Script trên nhiều trình duyệt khác nhau.

Trong bài viết này, tôi sẽ hướng dẫn chúng ta tìm hiểu các quy tắc để viết các biểu thức Locator sử dụng hai cách phổ biến mà các nhà phát triển Test Script kiểm thử tự động thường xuyên sử dụng là XPATH và CSS Selector.

I. DẠNG ĐƠN GIẢN

Đây là dạng biểu thức phổ biến nhất để xác định các Element trên Web Page, hầu hết các nhà phát triển Test Script đều nắm vững và vận hành thành thạo các dạng này. Chúng là các biểu thức xác định trực tiếp tới các Element thông qua các thẻ và quan hệ giữa các thẻ trong HTML document.

DIRECT CHILD - Xác định "element con trực tiếp (cấp 1)" từ Element cha

Trong một số trường hợp khi không xác định được chính xác Element mà chúng ta muốn thao tác, tuy nhiên lại xác định được Element cha của Element cần thao tác, ta có thể sử dụng cách này để xác định tới Element mà mình muốn thao tác.

Ở dạng biểu thức XPATH ta sử dụng "/" để tham chiếu tới Element con từ Element cha, trong khi ở dạng CSS, ta sử dụng qua ">"

Ví dụ: Cùng xác một HTML Document như sau:

<html>
<body>
    <div>
            <a> This is direct child</a>
            <div>
                    <a>This is sub child</a>
            </div>
    </div>
</body>
</html>

Để xác định các thẻ a là con trực thuộc của thẻ div, biểu thức sẽ như sau:

XPath: //div/a

CSS: div
> a

Kết quả sẽ trả về <a> This is direct child</a>

CHILD OR SUBCHILD - Xác định các element con (không phân biệt cấp) từ Element cha

Khác với trường hợp Direct Child (Con trực tiếp), khi muốn xác định một Element con bất kỳ (không phân biệt cấp) từ một Element chứa nó. Ta sử dụng quy tắc sau.

Với XPATH ta sử dụng "//" để tham chiếu, với CSS ta sử dụng dấu cách " "

Ví dụ: 

XPath: //div//a

CSS: div
a

Kết quả trả về sẽ là:

<a>This is direct child</a>

<a> This is sub child</a>

HỌC Ở TESTMASTER NHƯ NÀO?

  • Tham gia học trên lớp
    Mỗi khóa học, học viên sẽ học tập trung trên lớp dưới sự hướng dẫn của các chuyên gia trong lĩnh vực kiểm thử đến từ FPT Software
  • Tự học lại trên giáo trình điện tử
    Mỗi bài học sẽ có giáo trình điện tử để học viên có thể học lại bất cứ khi nào, bất cứ nơi đâu
  • Tham gia làm dự án thực tế
    Sau khi trang bị đầy đủ các kiến thức, học viên được tham gia vào các dự án thực tế để tích lũy kinh nghiệm làm việc
  • Cấp chứng chỉ & đi làm
    Kết thúc khóa học, học viên sẽ được đánh giá cấp chứng chỉ và hỗ trợ việc làm. Hỗ trợ thực tập, làm đồ án cho sinh viên