Bài đăng trên blog này cho thấy cách kiểm soát các phần tử HTML
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Ghi chú. bạn có thể tìm thấy mã nguồn cho bài đăng này trong công thức
Phần tử chọn giá trị đơn
Hãy lấy một trang nơi người dùng chọn một trạng thái từ danh sách các lựa chọn. Có thể đó là bang quê hương của họ, hoặc bang mà họ muốn tránh xa nơi kẻ thù của họ sinh sống
Pick one state
Alaska
Hawaii
California
Nevada
...
Các trình duyệt hiện đại hiển thị
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Chúng tôi có thể đặt trạng thái đã chọn từ thử nghiệm Cypress bằng cách sử dụng. chọn lệnh
beforeEach[[] => {
cy.visit['index.html']
}]
describe['HTML select element', [] => {
context['single value', [] => {
it['sets MA', [] => {
// //on.cypress.io/select
// set using value
// Massachusetts
cy.get['#my-state'].select['MA']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]
}]
}]Ghi chú. để bỏ qua việc lặp lại cùng một mã, các đoạn mã kiểm tra sau sẽ bỏ qua các khối
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]
Pick several states
...
bách lệnh. select cho phép một người chọn một tùy chọn bằng cách sử dụng giá trị hoặc nội dung văn bản của nó. Bài kiểm tra tiếp theo chọn tùy chọn có nội dung chữ "Massachusetts"
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Chọn nhiều giá trị
HTML cho phép một phần tử
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]
Pick several states
...
Cách kiểm tra cũng giống như vậy - chúng ta chỉ cần cẩn thận khi kiểm tra giá trị đã chọn - chúng ta cần sử dụng đẳng thức sâu để so sánh hai mảng
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Thử nghiệm hoạt động và chọn 3 trạng thái
Mẹo. lưu ý đường viền màu xanh xung quanh phần tử
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Vì vậy, thử nghiệm cụ thể này sẽ rất tuyệt khi kết thúc bằng việc làm mờ phần tử
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Giá trị đơn sử dụng Select2
Phần tử
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]"ứng dụng. js" tạo tiện ích HTML hiển thị thay cho phần tử
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Đối với tôi, tiện ích Select2 trông đẹp hơn phần tử
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Nếu chúng ta viết một bài kiểm tra Cypress để đặt một giá trị đối với phần tử
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]
Pick one state
Alaska
Hawaii
California
Nevada
...
Khi Select2 tự hiển thị, nó sẽ ẩn phần tử
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Chúng tôi có thể buộc Cypress bỏ qua phần tích hợp sẵn của nó bằng cách sử dụng tùy chọn
Pick several states
...
Pick one state
Alaska
Hawaii
California
Nevada
...
Chúng tôi có phần tử
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Bạn có thể tìm thấy cùng một bộ chọn thậm chí nhanh hơn bằng cách sử dụng Cypress Selector Playground cố gắng chọn một phần tử hiển thị
Sau khi bạn nhấp vào nút "Sao chép", bạn có toàn bộ lệnh
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]beforeEach[[] => {
cy.visit['index.html']
}]
describe['HTML select element', [] => {
context['single value', [] => {
it['sets MA', [] => {
// //on.cypress.io/select
// set using value
// Massachusetts
cy.get['#my-state'].select['MA']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]
}]
}]Chọn một giá trị bằng cách gõ
Hãy chọn một trạng thái bằng cách nhập một phần tên của nó. Đây là nơi biết đánh dấu HTML mà Select2 tạo ra là rất quan trọng để gửi đúng lệnh từ thử nghiệm. May mắn thay, chúng ta luôn có thể kiểm tra cấu trúc HTML bằng DevTools
Đầu tiên, lưu ý rằng người dùng phải nhấp vào tiện ích trước khi phần tử đầu vào xuất hiện
Hãy nhấp vào từ thử nghiệm của chúng tôi, nhưng chúng tôi không thể nhấp vào phần tử
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]beforeEach[[] => {
cy.visit['index.html']
}]
describe['HTML select element', [] => {
context['single value', [] => {
it['sets MA', [] => {
// //on.cypress.io/select
// set using value
// Massachusetts
cy.get['#my-state'].select['MA']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]
}]
}]Kiểm tra mở tiện ích đầu vào và chúng tôi có thể kiểm tra bộ chọn cho phần tử đầu vào để nhập vào
Chúng tôi có thể sao chép bộ chọn
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Trong những tình huống như thế này, bạn cần xem xét kỹ phần đánh dấu HTML để xem liệu có điều gì cụ thể liên kết tiện ích trở lại thành phần ban đầu của nó không
Lưu ý rằng tiện ích Select2 có một thuộc tính có một phần của tên gốc
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]beforeEach[[] => {
cy.visit['index.html']
}]
describe['HTML select element', [] => {
context['single value', [] => {
it['sets MA', [] => {
// //on.cypress.io/select
// set using value
// Massachusetts
cy.get['#my-state'].select['MA']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]
}]
}]Chúng tôi có thể mở rộng kiểm tra để xác nhận giá trị đã chọn và văn bản hiển thị là chính xác
beforeEach[[] => {
cy.visit['index.html']
}]
describe['HTML select element', [] => {
context['single value', [] => {
it['sets MA', [] => {
// //on.cypress.io/select
// set using value
// Massachusetts
cy.get['#my-state'].select['MA']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]
}]
}]Chỉ để hiển thị tiện ích đang hoạt động, bạn có thể trì hoãn việc nhập từng ký tự bằng cách sử dụng. gõ tùy chọn của lệnh
beforeEach[[] => {
cy.visit['index.html']
}]
describe['HTML select element', [] => {
context['single value', [] => {
it['sets MA', [] => {
// //on.cypress.io/select
// set using value
// Massachusetts
cy.get['#my-state'].select['MA']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]
}]
}]Nhiều giá trị sử dụng Select2
Hãy chuyển sang tình huống tiếp theo. khi tiện ích Select2 bao bọc một phần tử
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]beforeEach[[] => {
cy.visit['index.html']
}]
describe['HTML select element', [] => {
context['single value', [] => {
it['sets MA', [] => {
// //on.cypress.io/select
// set using value
// Massachusetts
cy.get['#my-state'].select['MA']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]
}]
}]Chúng tôi có thể đặt các giá trị trực tiếp trên phần tử
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]beforeEach[[] => {
cy.visit['index.html']
}]
describe['HTML select element', [] => {
context['single value', [] => {
it['sets MA', [] => {
// //on.cypress.io/select
// set using value
// Massachusetts
cy.get['#my-state'].select['MA']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]
}]
}]Làm cách nào để chúng tôi xác nhận "viên thuốc" được hiển thị bởi tiện ích Select2 -
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Hãy mở bảng điều khiển DevTools và xem phần đánh dấu bằng bảng Thành phần
Phần tử ban đầu của chúng tôi
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]beforeEach[[] => {
cy.visit['index.html']
}]
describe['HTML select element', [] => {
context['single value', [] => {
it['sets MA', [] => {
// //on.cypress.io/select
// set using value
// Massachusetts
cy.get['#my-state'].select['MA']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]
}]
}]Bài kiểm tra xác nhận rằng các tiểu bang New England này thực sự là những gì chúng tôi muốn chọn
Điều gì sẽ xảy ra nếu chúng ta muốn tìm trạng thái bằng cách nhập chứ không phải bằng cách đặt chúng theo giá trị? . Thử nghiệm trì hoãn mỗi ký tự 500 mili giây để rõ ràng
beforeEach[[] => {
cy.visit['index.html']
}]
describe['HTML select element', [] => {
context['single value', [] => {
it['sets MA', [] => {
// //on.cypress.io/select
// set using value
// Massachusetts
cy.get['#my-state'].select['MA']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]
}]
}]Đang xóa mục đã chọn
Điều gì xảy ra nếu người dùng chọn một vài mục, sau đó xóa một trong số chúng?
Mỗi mục Select2 có một khoảng với lớp
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]beforeEach[[] => {
cy.visit['index.html']
}]
describe['HTML select element', [] => {
context['single value', [] => {
it['sets MA', [] => {
// //on.cypress.io/select
// set using value
// Massachusetts
cy.get['#my-state'].select['MA']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]
}]
}]Kiểm tra nhanh - chớp mắt và bạn sẽ bỏ lỡ - nhưng bạn vẫn có thể thấy trạng thái được thêm và xóa chính xác
kiểm soát theo chương trình
Select2 cho phép mã ứng dụng truy xuất các mục đã chọn theo chương trình. Ví dụ: bạn có thể lấy các mục hiện được chọn bằng cách gọi phương thức
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Các bài kiểm tra Cypress có thể gọi trực tiếp phương thức này từ bài kiểm tra - vì bài kiểm tra chạy bên trong trình duyệt
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Sau khi kiểm tra kết thúc, hãy nhấp vào lệnh
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Từ mỗi đối tượng, hãy chọn các trường
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Dữ liệu đã tìm nạp
Select2 cho phép tải các lựa chọn từ máy chủ từ xa bằng lệnh gọi Ajax. Đây là mã khởi tạo tìm nạp danh sách người dùng
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Thử nghiệm của chúng tôi nên cẩn thận để không giới hạn tìm kiếm phần tử trong danh sách lựa chọn trống ban đầu. Ví dụ: bài kiểm tra này SẼ KHÔNG hoạt động
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Thử nghiệm trên không thành công - mặc dù chúng tôi có thể thấy người dùng có tên mà chúng tôi đang tìm kiếm
Lý do thất bại được mô tả trong Hướng dẫn về khả năng thử lại của chúng tôi. Bằng cách tách lệnh
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Có một số giải pháp cho vấn đề này, tất cả được hiển thị trong kho lưu trữ công thức nấu ăn ví dụ cây bách. Có lẽ cách đơn giản nhất là sử dụng một lệnh duy nhất để truy vấn phần tử bằng văn bản
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]các cy. chứa lệnh thử lại cho đến khi Select2 tìm nạp và hiển thị danh sách các tùy chọn và một tùy chọn có văn bản "Leanne Graham" xuất hiện
kết luận
Nếu bạn đang làm việc với một thư viện bao bọc phần tử HTML gốc bằng một tiện ích con, giống như Select2, thì điều quan trọng là phải biết đánh dấu bổ sung. Thử nghiệm phải tương tác với đánh dấu mới để kiểm soát tiện ích và xác nhận tiện ích được kết nối chính xác. Trong bài đăng này, chúng tôi đã xem xét phần tử gốc
it['sets Massachusetts', [] => {
// //on.cypress.io/select
// set using text
// Massachusetts
cy.get['#my-state'].select['Massachusetts']
// confirm the selected value
cy.get['#my-state'].should['have.value', 'MA']
}]Làm cách nào để nhận các giá trị đã chọn trong select2?
Có hai cách để truy cập dữ liệu lựa chọn hiện tại theo chương trình. sử dụng. select2['data'] hoặc bằng cách sử dụng bộ chọn jQuery .
Làm cách nào để đặt giá trị đã chọn trong menu thả xuống MultiSelect bằng JavaScript?
Giải pháp JavaScript ES6 thuần túy .
Nắm bắt mọi tùy chọn bằng hàm querySelectorAll và phân tách chuỗi giá trị
Sử dụng Array#forEach để lặp lại mọi phần tử từ mảng giá trị
Sử dụng Array#find để tìm tùy chọn khớp với giá trị đã cho
Đặt thuộc tính đã chọn của nó thành true
Làm cách nào để đặt giá trị đã chọn trong trình đơn thả xuống MultiSelect bằng jQuery?
Add ` $["#"].refresh[];` – Nouphal.M. Jan 4, 2014 at 4:56..
add $["#"].multiselect["refresh"]; – Dharmang. Jan 4, 2014 at 4:57..
$["#"].multiselect["refresh"]; – Sridhar R. .. .
@Nouphal. m. Nó hiển thị lỗi. .
@ user3085495 lỗi gì?
Select2 thiết lập giá trị như thế nào?
Tôi có một mã select2 đơn giản lấy dữ liệu từ AJAX. $["#programid"]. select2[{ placeholder. "Chọn một chương trình", allowClear. đúng, độ dài đầu vào tối thiểu. 3, ajax. { url. "ajax.