Selenium IDE- xác định phần tử html cho testing website

Đối với hầu hết các lệnh Selenium, chúng ta cần một vị trí đích xác định duy nhất phần tử web trong ngữ cảnh của một ứng dụng web.

Mục tiêu bao gồm một chiến lược định vị và có định dạng như:

1. LocatorType = LocatorStrategy  

Trong Selenium IDE, một mục tiêu hoạt động trên sáu chế độ xác định vị trí của một phần tử web cụ thể là:

• Định vị bằng số nhận dạng
• Định vị bằng phần tử ID
• Định vị theo tên
• Định vị bằng XPath
• Định vị bằng CSS
• Định vị bằng DOM

Xem thêm Kiểm tra lỗ hổng bảo mật CSS Injection

Selenium IDE- Xác định phần tử html cho automation test (Theo Id)

• Loại định vị này rõ ràng hơn và phần tử đầu tiên có thuộc tính id phù hợp được sử dụng.
• Nó chỉ được sử dụng khi bạn biết thuộc tính id của một phần tử.
• Ví dụ, id = đăng nhập.

Chúng ta hãy xem xét một ví dụ về cách sử dụng Id locator làm mục tiêu cho các lệnh trong Selenium IDE.

Chúng tôi sẽ tạo một bài kiểm tra đăng nhập để bạn có thể hiểu rõ hơn về việc định vị các phần tử thông qua Id locator.

• Khởi chạy trình duyệt Firefox.
• Nhấp vào biểu tượng Selenium ở góc trên cùng bên phải trên trình duyệt của bạn.
• Nó sẽ khởi chạy giao diện mặc định của Selenium IDE.
• Bấm vào hộp văn bản lệnh có trên Hộp soạn thảo tập lệnh thử nghiệm.

• Sửa đổi các thuộc tính của lệnh đầu tiên như:
  • Lệnh: mở
  • Mục tiêu: https://mail.rediff.com/cgi-bin/login.cgi
  • Khi thực hiện lệnh này sẽ tải trang đăng nhập Rediff trên trình duyệt Firefox của bạn.

Để nhập lệnh thứ hai, chúng ta cần một phần tử nhận dạng duy nhất cho hộp văn bản Tên người dùng, phần tử này sẽ giúp IDE xác định vị trí đích.

Xem thêm CSS trong React

• Nhấp chuột phải vào hộp văn bản “Username” và chọn Kiểm tra phần tử.

• Nó sẽ khởi chạy một cửa sổ chứa tất cả các mã cụ thể liên quan đến việc phát triển hộp văn bản “Username”.

• Chọn phần tử đầu tiên có thuộc tính ID phù hợp chứa ID cụ thể cho hộp văn bản “Tên người dùng”.

• Sửa đổi các thuộc tính của lệnh thứ hai như:
  • Lệnh: bấm vào
  • Mục tiêu: id = login1
  • Khi thực hiện lệnh này sẽ nhấp vào hộp văn bản Tên người dùng.

Chúng tôi sẽ sử dụng cùng một phần tử id cho lệnh tiếp theo của chúng tôi.

• Sửa đổi các thuộc tính của lệnh thứ ba như:
  • Lệnh: gõ
  • Mục tiêu: id = login1
  • Giá trị: tên người dùng
  • Sau khi thực hiện lệnh này sẽ nhập tên người dùng vào hộp văn bản Tên người dùng.

Bây giờ chúng ta sẽ thêm một lệnh sẽ nhấp vào hộp văn bản “Mật khẩu”. Đối với lệnh này, chúng tôi cần một nhận dạng duy nhất cho trường “Mật khẩu” sẽ giúp IDE xác định vị trí mục tiêu.

• Nhấp chuột phải vào hộp văn bản “Mật khẩu” và chọn Kiểm tra phần tử.

• Nó sẽ khởi chạy một cửa sổ chứa tất cả các mã cụ thể liên quan đến sự phát triển của hộp văn bản “password”.

• Chọn phần tử đầu tiên có thuộc tính ID phù hợp chứa ID cụ thể cho hộp văn bản “Mật khẩu”.

• Sửa đổi các thuộc tính của lệnh thứ tư như:
  • Lệnh: bấm vào
  • Mục tiêu: id = mật khẩu
  • Sau khi thực hiện, lệnh này sẽ nhấp vào hộp văn bản Mật khẩu.

Chúng tôi sẽ sử dụng cùng một phần tử ID cho lệnh tiếp theo của chúng tôi, liên quan đến việc nhập mật khẩu làm thông tin đăng nhập.

• Sửa đổi các thuộc tính của lệnh thứ năm như:
  • Lệnh: gõ
  • Mục tiêu: id = mật khẩu
  • Giá trị: ********** (Mật khẩu đăng nhập của người dùng)
  • Sau khi thực hiện, lệnh này sẽ nhập mật khẩu người dùng làm thông tin đăng nhập.

Xem thêm Kiểm tra lỗ hổng bảo mật Command Injection

Cuối cùng, chúng tôi cần một yếu tố nhận dạng duy nhất cho nút Gửi đăng nhập sẽ giúp IDE xác định vị trí mục tiêu.

• Nhấp chuột phải vào nút “Go” và chọn Kiểm tra phần tử.

• Nó sẽ khởi chạy một cửa sổ chứa tất cả các mã cụ thể liên quan đến sự phát triển của nút gửi “Go”.

• Chọn phần tử đầu tiên có thuộc tính tên phù hợp chứa tên cụ thể cho nút gửi “Start”.
• Ở đây, chúng tôi không tìm thấy bất kỳ thuộc tính id phù hợp nào vì vậy chúng tôi phải sử dụng bộ định vị Tên để xác định vị trí nút gửi “Bắt đầu”.

• Sửa đổi các thuộc tính của lệnh thứ sáu như:
  • Lệnh: click at
  • Mục tiêu: name = proceed
  • Khi thực hiện lệnh này sẽ nhấp vào nút gửi “Bắt đầu”.

• Nhấp vào nút “Chạy thử nghiệm hiện tại” có trên menu thanh công cụ của IDE. Nó sẽ thực thi tất cả các lệnh đã chèn của bạn trên trình duyệt và cung cấp cho bạn bản tóm tắt tổng thể về tập lệnh kiểm tra đã thực thi.
• Ngăn Nhật ký hiển thị tóm tắt tổng thể của các tập lệnh kiểm tra đã thực thi.

Do đó, bạn có thể thấy rằng chúng tôi đã sử dụng id locator làm mục tiêu cho hầu hết các lệnh Selenium của chúng tôi.

Selenium IDE- xác định vị trí phần từ html(Theo identifier)

• Số nhận dạng đã được sử dụng làm loại mặc định trước đó và hiện không được khuyến nghị vì nó không được WebDriver hỗ trợ.
• Với identifier, chúng ta có thể sử dụng cả hai chiến lược định vị như ID và Tên.
• Phần tử đầu tiên có thuộc tính ID phù hợp được sử dụng.
• Nếu không có phần tử nào có thuộc tính ID phù hợp thì phần tử đầu tiên có thuộc tính name phù hợp sẽ được sử dụng.
• Ví dụ: identified= đăng nhập (đây có thể là ID hoặc Tên).

Chúng ta hãy xem xét một ví dụ về cách sử dụng bộ định vị Định danh làm mục tiêu cho các lệnh trong Selenium IDE.

Xem thêm Tìm hiểu về Selenium & thuật ngữ cơ bản Selenium

Chúng tôi sẽ tạo một bài kiểm tra đăng nhập để bạn có thể hiểu rõ hơn về việc định vị các phần tử thông qua identifier.

• Khởi chạy trình duyệt Firefox.
• Nó sẽ khởi chạy giao diện mặc định của Selenium IDE.
• Bấm vào hộp văn bản lệnh có trên Hộp soạn thảo tập lệnh thử nghiệm.

• Sửa đổi các thuộc tính của lệnh đầu tiên như:
  • Lệnh: open
  • Mục tiêu: https://mail.rediff.com/cgi-bin/login.cgi
  • Sau khi thực hiện, lệnh này sẽ tải trang đăng nhập Rediff trên trình duyệt Firefox của bạn.

Để nhập lệnh thứ hai, chúng ta cần một phần tử nhận dạng duy nhất cho hộp văn bản Tên người dùng, phần tử này sẽ giúp IDE xác định vị trí đích.

• Nó sẽ khởi chạy một cửa sổ chứa tất cả các mã cụ thể liên quan đến việc phát triển hộp văn bản “Username”.

• Chọn phần tử đầu tiên có thuộc tính ID phù hợp chứa ID cụ thể cho hộp văn bản “Username”.

• Sửa đổi các thuộc tính của lệnh thứ hai như:
  • Lệnh: click at
  • Mục tiêu: số nhận dạng = login1
  • Sau khi thực hiện, lệnh này sẽ nhấp vào hộp văn bản Tên người dùng.

Chúng tôi sẽ sử dụng cùng một phần tử định danh cho lệnh tiếp theo của chúng tôi.

• Sửa đổi các thuộc tính của lệnh thứ ba như:
  • Lệnh: type
  • Mục tiêu: identified = login1
  • Giá trị: username
  • Sau khi thực hiện, lệnh này sẽ nhập tên người dùng vào hộp văn bản username.

Đối với lệnh này, chúng tôi cần một nhận dạng duy nhất cho trường “password” sẽ giúp IDE xác định vị trí mục tiêu.

• Nó sẽ khởi chạy một cửa sổ chứa tất cả các mã cụ thể liên quan đến sự phát triển của hộp văn bản “password”.

• Chọn phần tử đầu tiên có thuộc tính ID phù hợp chứa ID cụ thể cho hộp văn bản “password”.

• Sửa đổi các thuộc tính của lệnh thứ tư như:
  • Lệnh: click at
  • Mục tiêu: identified = password
  • Sau khi thực hiện, lệnh này sẽ nhấp vào hộp văn bản Mật khẩu.

Chúng tôi sẽ sử dụng cùng một phần tử ID cho lệnh tiếp theo của chúng tôi, liên quan đến việc nhập mật khẩu làm thông tin đăng nhập.

• Sửa đổi các thuộc tính của lệnh thứ năm như:
  • Lệnh: type
  • Mục tiêu: identifier= password
  • Giá trị: ********** (Mật khẩu đăng nhập của người dùng)
  • Khi thực thi lệnh này sẽ nhập mật khẩu người dùng làm thông tin đăng nhập.

Cuối cùng, chúng tôi cần một yếu tố nhận dạng duy nhất cho nút Gửi đăng nhập sẽ giúp IDE xác định vị trí mục tiêu.

• Nhấp chuột phải vào nút “Go” và chọn Kiểm tra phần tử.

• Nó sẽ khởi chạy một cửa sổ chứa tất cả các mã cụ thể liên quan đến sự phát triển của nút gửi “Go”.

• Chọn phần tử đầu tiên có thuộc tính tên phù hợp chứa tên cụ thể cho nút gửi “proceed”.

• Sửa đổi các thuộc tính của lệnh thứ sáu như:
  • Lệnh: click at
  • Mục tiêu: identifier = proceed
  • Sau khi thực hiện, lệnh này sẽ nhấp vào nút gửi “Go”.

• Nhấp vào nút “Chạy thử nghiệm hiện tại” có trên menu thanh công cụ của IDE. Nó sẽ thực thi tất cả các lệnh đã chèn của bạn trên trình duyệt và cung cấp cho bạn bản tóm tắt tổng thể về tập lệnh kiểm tra đã thực thi.
• Ngăn Nhật ký hiển thị tóm tắt tổng thể của các tập lệnh kiểm tra đã thực thi.

Do đó, bạn có thể thấy rằng chúng tôi đã sử dụng bộ định vị identifier làm mục tiêu cho hầu hết các lệnh Selenium của chúng tôi.

Xác định phần tử html để testing với selenium sử dụng CSS selector – Class

• Cú pháp: css = <thẻ HTML> <.> <Giá trị của thuộc tính lớp>
• “.” được dùng để ký hiệu thuộc tính Class. Bắt buộc phải sử dụng dấu chấm nếu thuộc tính lớp đang được sử dụng để tạo Bộ chọn CSS.
• Giá trị của lớp luôn đứng trước dấu chấm.

Chúng ta hãy xem xét một ví dụ về cách sử dụng thuộc tính lớp để tạo Bộ chọn CSS xác định duy nhất một phần tử web.

Chúng tôi sẽ cố gắng xác định một phần tử web bằng cách xác định Bộ chọn CSS cho phần tử web cụ thể đó.

• Khởi chạy trình duyệt Firefox.
• Nhấp vào biểu tượng Selenium ở góc trên cùng bên phải trên trình duyệt của bạn.
• Nó sẽ khởi chạy giao diện mặc định của Selenium IDE.
• Bấm vào hộp văn bản lệnh có trên Hộp soạn thảo tập lệnh thử nghiệm.

• Sửa đổi các thuộc tính của lệnh đầu tiên như:
  • Lệnh: open
  • Mục tiêu: https://www.testandquiz.com/user-login
  • Sau khi thực hiện, lệnh này sẽ tải trang đăng nhập Kiểm tra và Trắc nghiệm trên trình duyệt Firefox của bạn.

Bây giờ, bằng cách sử dụng lệnh thứ hai, chúng tôi sẽ cố gắng xác định hộp văn bản “username”.

Đầu tiên, chúng ta sẽ kiểm tra hộp văn bản “username” để lấy giá trị của thuộc tính lớp của nó.

• Nhấp chuột phải vào hộp văn bản Tên người dùng và chọn các phần tử kiểm tra.

• Nó sẽ khởi chạy một cửa sổ chứa tất cả các mã cụ thể liên quan đến việc phát triển hộp văn bản “username”.

• Chọn thẻ đầu vào cùng với giá trị của thuộc tính lớp.

Chúng tôi sẽ định nghĩa Bộ chọn CSS là: css = input.form-control

• Sửa đổi các thuộc tính của lệnh thứ hai như:
  • Lệnh: click at
  • Mục tiêu: css = input.form-control
  • Sau khi thực hiện, lệnh này sẽ nhấp vào hộp văn bản “Tên người dùng”.

Chúng tôi sẽ thêm một lệnh nữa bằng cách sử dụng cùng một Bộ chọn CSS. Lệnh này sẽ nhập văn bản tên người dùng vào hộp văn bản “Tên người dùng”.

• Sửa đổi các thuộc tính của lệnh thứ ba như:
  • Lệnh: type
  • Mục tiêu: css = input.form-control
  • Giá trị: tên người dùng
  • Sau khi thực hiện, lệnh này sẽ nhập giá trị vào hộp văn bản “Tên người dùng”.

Hãy để chúng tôi thực thi tập lệnh thử nghiệm của mình để xem liệu các lệnh được chèn của chúng tôi có hoạt động hay không.

• Nhấp vào nút “Chạy thử nghiệm hiện tại” có trên menu thanh công cụ của IDE. Nó sẽ thực thi tất cả các lệnh đã chèn của bạn trên trình duyệt và cung cấp cho bạn bản tóm tắt tổng thể về tập lệnh kiểm tra đã thực thi.

Ảnh chụp màn hình sau đây cho thấy rằng chúng tôi đã thực thi thành công tập lệnh thử nghiệm của mình.

(1) – Giá trị của thuộc tính lớp được sử dụng cho cả hai Công cụ chọn CSS của chúng tôi để định vị phần tử hộp văn bản “username”.

(2) – Ngăn nhật ký hiển thị tóm tắt tổng thể của tập lệnh kiểm tra đã thực thi.

(3) – Giá trị được tạo ra do thực hiện lệnh thứ ba của chúng tôi.

Xác định phần tử html testing selenium sử dụng Selector CSS – attribute

• Cú pháp: css = <thẻ HTML> <[attribute = Giá trị của attribute]>
• Chúng ta có thể sử dụng giá trị, loại và tên làm attribute để tạo Selector CSS.
• Giá trị của attribute biểu thị giá trị đang được truy cập tại thời điểm sử dụng một attribute cụ thể.

Chúng ta hãy xem xét một ví dụ về cách sử dụng attribute để tạo Selector CSS xác định duy nhất một phần tử web.

Chúng tôi sẽ cố gắng xác định một phần tử web bằng cách xác định Selector CSS cho phần tử web cụ thể đó.

• Khởi chạy trình duyệt Firefox.
• Nhấp vào biểu tượng Selenium ở góc trên cùng bên phải trên trình duyệt của bạn.
• Nó sẽ khởi chạy giao diện mặc định của Selenium IDE.
• Bấm vào hộp văn bản lệnh có trên Hộp soạn thảo tập lệnh thử nghiệm.

• Sửa đổi các attribute của lệnh đầu tiên như:
  • Lệnh: open
  • Mục tiêu: https://www.testandquiz.com/user-login0
  • Sau khi thực hiện, lệnh này sẽ tải trang đăng nhập Kiểm tra và Trắc nghiệm trên trình duyệt Firefox của bạn.

Bây giờ, bằng cách sử dụng lệnh thứ hai, chúng tôi sẽ cố gắng xác định hộp văn bản “user name”.

Đầu tiên, chúng tôi sẽ kiểm tra hộp văn bản “user name” để xác định attribute nào sẽ phù hợp nhất để định vị phần tử web mong muốn.

• Nhấp chuột phải vào hộp văn bản user name và chọn các phần tử kiểm tra.

• Nó sẽ khởi chạy một cửa sổ chứa tất cả các mã cụ thể liên quan đến việc phát triển hộp văn bản “user name”.

• Chọn thẻ đầu vào cùng với giá trị của attribute name.

Chúng tôi sẽ định nghĩa Selector CSS là: css = input [name = ’email_id’]

• Sửa đổi các attribute của lệnh thứ hai như:
  • Lệnh: click at
  • Mục tiêu: css = input [name = ’email_id’]
  • Sau khi thực hiện, lệnh này sẽ nhấp vào hộp văn bản “user name”.

Chúng tôi sẽ thêm một lệnh nữa bằng cách sử dụng cùng một Selector CSS. Lệnh này sẽ nhập văn bản user name vào hộp văn bản “user name”.

• Sửa đổi các attribute của lệnh thứ ba như:
  • Lệnh: type
  • Mục tiêu: css = input [name = ’email_id’]
  • Giá trị: user name
  • Sau khi thực hiện, lệnh này sẽ nhập giá trị vào hộp văn bản “user name”.

Hãy để chúng tôi thực thi tập lệnh thử nghiệm của mình để xem liệu các lệnh được chèn của chúng tôi có hoạt động hay không.

• Nhấp vào nút “Chạy thử nghiệm hiện tại” có trên menu thanh công cụ của IDE. Nó sẽ thực thi tất cả các lệnh đã chèn của bạn trên trình duyệt và cung cấp cho bạn bản tóm tắt tổng thể về tập lệnh kiểm tra đã thực thi.

Ảnh chụp màn hình sau đây cho thấy rằng chúng tôi đã thực thi thành công tập lệnh thử nghiệm của mình.

(1) – Giá trị của attribute name được sử dụng cho cả hai Công cụ chọn CSS của chúng tôi để định vị phần tử hộp văn bản “user name”.

(2) – Ngăn nhật ký hiển thị tóm tắt tổng thể của tập lệnh kiểm tra đã thực thi.

(3) – Giá trị được tạo ra do thực hiện lệnh thứ ba của chúng tôi.

Bộ chọn CSS – ID / Class và attribute

• Cú pháp: css = <thẻ HTML> <. Hoặc #> <giá trị của attribute Class hoặc ID> <[attribute = Giá trị của attribute]>
• ‘#’ được sử dụng để tượng trưng cho attribute ID. Bắt buộc phải sử dụng dấu thăng nếu attribute ID đang được sử dụng để tạo Bộ chọn CSS.
• “.” được dùng để ký hiệu attribute Class. Bắt buộc phải sử dụng dấu chấm nếu attribute Class đang được sử dụng để tạo Bộ chọn CSS.
• Giá trị của attribute Class hoặc ID – Là giá trị của attribute ID / Class đang được truy cập.
• Chúng ta có thể sử dụng giá trị, kiểu và tên làm attribute trong phần “<[attribute = Giá trị của attribute]>”.
• Giá trị của attribute biểu thị giá trị đang được truy cập tại thời điểm sử dụng một attribute cụ thể.
• Chúng tôi cũng có thể thêm nhiều hơn hai attribute để định vị phần tử web mong muốn. Ví dụ: css = input # Passwd [type = ‘password’] [name = ‘Passwd’].

Chúng ta hãy xem xét một ví dụ về cách sử dụng ID / Class và attribute để tạo Bộ chọn CSS xác định duy nhất một phần tử web.

Chúng tôi sẽ cố gắng xác định một phần tử web bằng cách xác định Bộ chọn CSS cho phần tử web cụ thể đó.

• Khởi chạy trình duyệt Firefox.
• Nhấp vào biểu tượng Selenium ở góc trên cùng bên phải trên trình duyệt của bạn.
• Nó sẽ khởi chạy giao diện mặc định của Selenium IDE.
• Bấm vào hộp văn bản lệnh có trên Hộp soạn thảo tập lệnh thử nghiệm.

• Sửa đổi các attribute của lệnh đầu tiên như:
  • Lệnh: open
  • Mục tiêu: https://www.testandquiz.com/user-login0
  • Sau khi thực hiện, lệnh này sẽ tải trang đăng nhập Kiểm tra và Trắc nghiệm trên trình duyệt Firefox của bạn.

Bây giờ, bằng cách sử dụng lệnh thứ hai, chúng tôi sẽ cố gắng xác định hộp văn bản “username”.

Đầu tiên, chúng ta sẽ kiểm tra hộp văn bản “username” để lấy giá trị của attribute ID / Class. Sau đó, chúng tôi sẽ xác định các attribute sẽ phù hợp nhất để định vị phần tử mong muốn.

• Nhấp chuột phải vào hộp văn bản username và chọn các phần tử kiểm tra.

• Nó sẽ khởi chạy một cửa sổ chứa tất cả các mã cụ thể liên quan đến việc phát triển hộp văn bản “username”.

• Chọn thẻ đầu vào, giá trị của attribute ID, giá trị của attribute tên và giá trị của attribute trình giữ chỗ.

Chúng tôi sẽ định nghĩa Bộ chọn CSS là: css = input # email [name = ’email_id’] [placeholder = ‘Email’]

• Sửa đổi các attribute của lệnh thứ hai như:
  • Lệnh: click at
  • Mục tiêu: css = input # email [name = ’email_id’] [placeholder = ‘Email’]
  • Sau khi thực hiện, lệnh này sẽ nhấp vào hộp văn bản “username”.

Chúng tôi sẽ thêm một lệnh nữa bằng cách sử dụng cùng một Bộ chọn CSS. Lệnh này sẽ nhập văn bản username vào hộp văn bản “username”.

• Sửa đổi các attribute của lệnh thứ ba như:
  • Lệnh: type
  • Mục tiêu: css = input # email [name = ’email_id’] [placeholder = ‘Email’]
  • Giá trị: username
  • Sau khi thực hiện, lệnh này sẽ nhập giá trị vào hộp văn bản “username”.

Hãy để chúng tôi thực thi tập lệnh thử nghiệm của mình để xem liệu các lệnh được chèn của chúng tôi có hoạt động hay không.

• Nhấp vào nút “Chạy thử nghiệm hiện tại” có trên menu thanh công cụ của IDE. Nó sẽ thực thi tất cả các lệnh đã chèn của bạn trên trình duyệt và cung cấp cho bạn bản tóm tắt tổng thể về tập lệnh kiểm tra đã thực thi.

Ảnh chụp màn hình sau đây cho thấy rằng chúng tôi đã thực thi thành công tập lệnh thử nghiệm của mình.

(1) – Thẻ nhập, giá trị của attribute ID, giá trị của attribute tên và giá trị của attribute giữ chỗ được sử dụng cho cả hai Công cụ chọn CSS của chúng tôi để định vị phần tử hộp văn bản “username”.

(2) – Ngăn nhật ký hiển thị tóm tắt tổng thể của tập lệnh kiểm tra đã thực thi.

(3) – Giá trị được tạo ra do thực hiện lệnh thứ ba của chúng tôi.

Định vị phần tử html cho selenium sử dụng selector CSS – Chuỗi con

Nó cho phép khớp một phần chuỗi để định vị một phần tử web cụ thể.

Có ba cơ chế trong đó việc đối sánh chuỗi có thể được thực hiện bằng cách sử dụng selector CSS.

1. Khớp tiền tố
2. Khớp với một hậu tố
3. Khớp một chuỗi con

Chúng tôi sẽ xem xét chi tiết từng cơ chế với một ví dụ.

Xem thêm CSS là gì? cách hoạt động và cách học CSS

Khớp tiền tố

• Nó cho phép chúng tôi truy cập vào một chuỗi cụ thể bằng cách sử dụng một tiền tố phù hợp.
• Cú pháp: css = <thẻ HTML> <[thuộc tính ^ = tiền tố của chuỗi]>
• ^ – Ký hiệu tượng trưng để khớp một chuỗi sử dụng tiền tố.
• Tiền tố của chuỗi – Chuỗi dựa trên đó hoạt động đối sánh được thực hiện.
• Ví dụ: chúng tôi sẽ xác định selector CSS cho hộp văn bản “Mật khẩu” của trang đăng nhập Kiểm tra và Trắc nghiệm là: css = input # password [name ^ = ‘pass’]
• Nhấp vào nút “Tìm mục tiêu trong trang” để kiểm tra xem selector CSS đã xác định có định vị phần tử mong muốn hay không.

Khớp một hậu tố

• Nó cho phép chúng tôi truy cập vào một chuỗi cụ thể bằng cách sử dụng một hậu tố phù hợp.
• Cú pháp: css = <thẻ HTML> <[thuộc tính $ = hậu tố của chuỗi]>
• $ – Ký hiệu tượng trưng để khớp một chuỗi sử dụng hậu tố.
• Hậu tố của chuỗi – Chuỗi dựa trên đó hoạt động đối sánh được thực hiện.
• Ví dụ: chúng tôi sẽ xác định selector CSS cho hộp văn bản “Mật khẩu” của trang đăng nhập Kiểm tra và Trắc nghiệm là: css = input # password [name $ = ‘ord’]
• Nhấp vào nút “Tìm mục tiêu trong trang” để kiểm tra xem selector CSS đã xác định có định vị phần tử mong muốn hay không.

Khớp một chuỗi con

• Nó cho phép chúng tôi truy cập một chuỗi cụ thể bằng cách sử dụng một chuỗi con phù hợp.
• Cú pháp: css = <thẻ HTML> <[thuộc tính * = chuỗi con]>
• * – Kí hiệu tượng trưng để khớp một chuỗi bằng cách sử dụng chuỗi con.
• Chuỗi con – Chuỗi dựa trên đó hoạt động khớp được thực hiện.
• Ví dụ: chúng tôi sẽ xác định selector CSS cho hộp văn bản “Mật khẩu” của trang đăng nhập Kiểm tra và Trắc nghiệm là: css = input # password [name * = ‘word’]
• Nhấp vào nút “Tìm mục tiêu trong trang” để kiểm tra xem selector CSS đã xác định có định vị phần tử mong muốn hay không.

Xem thêm Cách tạo test case thủ công sử dụng Selenium IDE

Xác định phần tử html sử dụng selector CSS – internal text

• Các văn bản bên trong là các mẫu chuỗi mà thẻ HTML hiển thị trên trang web.
• Cú pháp: css = <HTML tag> <:> <contains> <(“internal text”)>
• ‘:’ được sử dụng để ký hiệu phương thức chứa.
• Ví dụ: chúng tôi sẽ xác định selector CSS cho nút gửi “login” của trang đăng nhập Kiểm tra và Trắc nghiệm là: css = button: contains (“Log in”)
• Nhấp vào nút “Tìm mục tiêu trong trang” để kiểm tra xem selector CSS đã xác định có định vị phần tử mong muốn hay không.

Xác định phần tử html trong Selenium IDE – sử dụng DOM

DOM là viết tắt của Document Object Model. Nói một cách dễ hiểu, DOM chỉ định biểu diễn cấu trúc của các phần tử HTML.

Có bốn cách mà qua đó chúng tôi có thể xác định và định vị một phần tử web bằng cách sử dụng DOM.

1. getElementById
2. getElementsByName
3. dom: name (chỉ áp dụng cho các phần tử trong một biểu mẫu được đặt tên)
4. dom: chỉ mục

getElementByID

• Cú pháp: document.getElementById (“id của phần tử”)
• Id của phần tử – Đây là giá trị của thuộc tính Id được truy cập beig.
• Ví dụ: chúng tôi sẽ xác định giá trị DOM cho hộp văn bản “Tên người dùng” của trang đăng nhập Kiểm tra và Trắc nghiệm là: document.getElementById (“email”)

getElementsByName

• Cú pháp: document.getElementByName (“name”) [index] Name – Là giá trị của thuộc tính name đang được truy cập.
• Chỉ mục – Một giá trị số nguyên được sử dụng để chỉ định vị trí của phần tử mong muốn.
• Ví dụ: chúng tôi sẽ xác định giá trị DOM cho hộp văn bản “Tên người dùng” của trang đăng nhập Kiểm tra và Trắc nghiệm là: document.getElementByName (“email_id”)

dom: tên của phần tử

• Cú pháp: document.forms [“tên của biểu mẫu”]. Elements [“tên của phần tử”]
• Tên của biểu mẫu – Là giá trị của thuộc tính tên của thẻ biểu mẫu có chứa phần tử bạn muốn truy cập.
• Tên của phần tử – Đây là giá trị của thuộc tính tên của phần tử mà bạn muốn truy cập.
• Ví dụ: “document.forms [” home “]. Elements [” userName “]”

dom: chỉ mục

• Cú pháp: document.forms [chỉ mục của biểu mẫu] .elements [chỉ mục của phần tử]
• Chỉ mục của biểu mẫu – Giá trị nguyên của chỉ mục (bắt đầu từ 0) của biểu mẫu đối với toàn bộ trang.
• Chỉ mục của phần tử – Giá trị nguyên của chỉ mục (bắt đầu từ 0) của biểu mẫu đối với toàn bộ biểu mẫu chứa nó.

Xem thêm Tìm hiểu tấn công Direct Dynamic Code Evaluation