programming

Tìm kiếm Select2 hoạt động như thế nào?

Khi bạn nhấn bất kỳ phím nào trong danh sách thả xuống, nó sẽ đưa bạn đến tùy chọn nhưng không cho phép bạn tìm kiếm toàn bộ hoặc chuỗi cụ thể

Cần tìm kiếm trên danh sách khi có một danh sách dài các mặt hàng có sẵn

Mất thời gian để tìm tùy chọn bằng cách cuộn danh sách

Trong hướng dẫn này, tôi chỉ cho bạn cách tạo danh sách thả xuống với hộp tìm kiếm bằng cách sử dụng plugin select2 và đọc tùy chọn đã chọn

Bản trình diễn  Tải xuống

nội dung

1. Tải xuống và đưa vào

  • Tải xuống thư viện select2 từ GitHub
  • Bao gồm 
    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']
    }]
  }]
}]
    2 và 
    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']
    }]
  }]
}]
    3 với thư viện jQuery trong phần 
    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']
    }]
  }]
}]
    4

2. HTML

Tạo một phần tử thả xuống và thêm một số tùy chọn. Đồng thời tạo một nút để đọc tùy chọn thả xuống đã chọn và hiển thị chúng trong 

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']
    }]
  }]
}]
5

Mã hoàn thành

 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu

3. jQuery

Khởi tạo 

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']
    }]
  }]
}]
6 trên 
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']
    }]
  }]
}]
7 và xác định sự kiện 
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']
    }]
  }]
}]
8 trên nút để đọc văn bản và giá trị tùy chọn đã chọn

Hiển thị các giá trị trong 

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']
    }]
  }]
}]
5

Mã hoàn thành

$[document].ready[function[]{
 
    // Initialize select2
    $["#selUser"].select2[];

    // Read selected option
    $['#but_read'].click[function[]{
        var username = $['#selUser option:selected'].text[];
        var userid = $['#selUser'].val[];

        $['#result'].html["id : " + userid + ", name : " + username];

    }];
}];

4. Bản trình diễn

Xem bản trình diễn

5. Kết luận

Tôi hy vọng hướng dẫn này sẽ giúp bạn tạo phần tử thả xuống với hộp tìm kiếm bằng cách sử dụng plugin select2

Bài đăng trên blog này cho biết 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']
}]
6 gốc từ các bài kiểm tra Cypress. Chúng ta cũng sẽ xem xét cách làm việc với thư viện trình bao bọc rất phổ biến có tên là Select2, thư viện này thay thế các 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']
}]
6 bằng một đánh dấu HTML bổ sung

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']
}]
6 gốc khá tốt. Đây là Chrome 80 hiển thị danh sách các trạng thái được nhóm theo múi giờ

Phần tử select trong Chrome 80

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']
}]
9 và 

  Pick several states


  ...
0

Kiểm tra đơn chọn Cypress đang hoạt động

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']
}]
6 duy nhất có nhiều tùy chọn được chọn


  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

 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
3

Thử nghiệm hoạt động và chọn 3 trạng thái

Nhiều lựa chọn

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']
}]
6 sau khi kiểm tra xong. Phần tử vẫn có tiêu điểm của trình duyệt - điều này có thể làm bạn ngạc nhiên khi tương tác với Cypress GUI. Ví dụ: khi nhấn "r" để chạy lại các bài kiểm tra, thay vào đó, bạn sẽ thay đổi trạng thái thành "Rhode Island"

Nhấp vào "r" sau khi kiểm tra xong. chọn "Rhode Island" [và không ai muốn điều đó]

Do đó, 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']
}]
6

 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
6
Tiêu điểm bị xóa khỏi phần tử được chọn

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']
}]
6 tiêu chuẩn vẫn ổn, nhưng các thư viện trình bao bọc như Select2 làm cho nó thậm chí còn tốt hơn. Trước tiên, bạn cần tải thư viện jQuery và Select2 và khởi tạo tiện ích như thế này

 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
8

"ứ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']
}]
6

$[document].ready[function[]{
 
    // Initialize select2
    $["#selUser"].select2[];

    // Read selected option
    $['#but_read'].click[function[]{
        var username = $['#selUser option:selected'].text[];
        var userid = $['#selUser'].val[];

        $['#result'].html["id : " + userid + ", name : " + username];

    }];
}];
0

Đố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']
}]
6 có sẵn, ngoài ra tiện ích này có đầu vào tự động hoàn thành rất hữu ích

Select2 tiện ích giá trị đơn

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']
}]
6 được bọc bằng Select2. nó sẽ thất bại

$[document].ready[function[]{
 
    // Initialize select2
    $["#selUser"].select2[];

    // Read selected option
    $['#but_read'].click[function[]{
        var username = $['#selUser option:selected'].text[];
        var userid = $['#selUser'].val[];

        $['#result'].html["id : " + userid + ", name : " + username];

    }];
}];
3
Thử nghiệm không thành công vì mã đánh dấu Select2 bao gồm phần tử

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']
}]
6 ban đầu, chỉ để lại một hình chữ nhật có độ phân giải pixel cao. Cypress kiểm tra xem phần tử có hiển thị hay không trước khi chọn giá trị và từ chối các phần tử hầu như không nhìn thấy đó vì người dùng không thể chọn phần tử theo cách này

The HTML markup shows why Cypress refuses to act on the original element

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


  ...
9

$[document].ready[function[]{
 
    // Initialize select2
    $["#selUser"].select2[];

    // Read selected option
    $['#but_read'].click[function[]{
        var username = $['#selUser option:selected'].text[];
        var userid = $['#selUser'].val[];

        $['#result'].html["id : " + userid + ", name : " + username];

    }];
}];
6
Thử nghiệm buộc phần tử phải chọn một giá trị

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']
}]
6 với giá trị phù hợp - nhưng trình bao bọc HTML Select2 có hiển thị đúng tên của trạng thái không?

Tìm phần tử bằng bảng DevTools Elements

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ị

Chọn phần tử bằng công cụ Cypress Selector Playground

Sau khi bạn nhấp vào nút "Sao chép", bạn có toàn bộ lệnh 

 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
31 trong khay nhớ tạm của mình - hãy dán nó vào bài kiểm tra của bạn và bắt đầu

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']
    }]
  }]
}]
0
Xác nhận văn bản được hiển thị bởi tiện ích Select2

Chọn một giá trị bằng cách gõ

Hãy chọn một tiểu bang 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

Người dùng lần đầu nhấp vào tiện ích Select2

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']
}]
6 ban đầu - thay vào đó, hãy nhấp vào phần tử HTML mà Select2 thêm vào trang. Chúng ta có thể sử dụng công cụ Cypress Selector Playground giống như trước để chọn bộ chọn và lệnh và sao chép dán chúng vào bài kiểm tra

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']
    }]
  }]
}]
1

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

Bộ chọn cho phần tử đầu vào được tạo bởi tiện ích Select2

Chúng tôi có thể sao chép bộ chọn 

 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
33 được đề xuất bởi công cụ NHƯNG điều này rất mong manh. Lưu ý trong trường hợp này, bộ chọn không có bất kỳ thứ gì kết nối nó với phần tử 
 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
34 ban đầu. Nếu trang của chúng tôi có một số tiện ích Select2, lệnh 
 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
33 sẽ trả về tất cả các tiện ích này, vì Cypress từ chối nhập nhiều thành phần cùng một lúc

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

Kiểm tra đánh dấu HTML Select2

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']
}]
6 - tên 
 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
37. Chúng ta có thể sử dụng thuộc tính này làm bộ chọn

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']
    }]
  }]
}]
2
Đang nhập phần tử đã chọn

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']
    }]
  }]
}]
3

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']
    }]
  }]
}]
4
cy. gõ chậm sau mỗi ký tự

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']
}]
6 cho phép chọn nhiều giá trị. Đánh dấu 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']
}]
6 là

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']
    }]
  }]
}]
5

Chúng tôi có thể đặt các giá trị trực tiếp trên phần tử 

 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
60 từ bài kiểm tra

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']
    }]
  }]
}]
6
Thử nghiệm chọn nhiều giá trị

Làm cách nào để xác nhận "viên thuốc" được hiển thị bởi tiện ích Select2 - 

 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
61, 
 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
62, 
 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
63 mà chúng tôi thấy ở đó?

Selector Playground đề xuất bộ chọn cho từng phần tử

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

Markup for element is followed by Select2 widget

Phần tử ban đầu của chúng tôi 

 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
60 ngay sau đó là phần tử 
 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
65 chứa các mục danh sách với mọi trạng thái đã chọn. Bộ chọn kết hợp cho điều này sẽ là 
 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
66 - đầu tiên nó tìm thấy một phần tử có id 
 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
67, sau đó là phần tử tiếp theo [toán tử CSS 
 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
68] với lớp 
 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
69, sau đó bên trong một phần tử có lớp 
 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
80. Hãy viết bài kiểm tra của chúng tôi

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']
    }]
  }]
}]
7

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

Ba trạng thái được 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']
    }]
  }]
}]
8
Nhập nhiều trạng thái và xác nhận lựa chọn

Đ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?

Xóa đánh dấu mục

Mỗi mục Select2 có một khoảng với lớp 

 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
81. Đó là một câu nói hay, nhưng chúng ta có thể sử dụng nó để loại bỏ một mục khỏi bài kiểm tra

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']
    }]
  }]
}]
9

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

Xóa một trong các lựa chọn bằng cách nhấp vào kiểm tra

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 

 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
69 với đối số 
 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
83

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']
}]
0

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']
}]
1

Sau khi kiểm tra kết thúc, hãy nhấp vào lệnh 

 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
84 để xem giá trị mang lại - đó là danh sách các trạng thái được chọn [với các thuộc tính bổ sung được thêm vào bởi mã Select2]

Các mục đã chọn được trả về bởi cuộc gọi 
 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
85

Từ mỗi đối tượng, hãy chọn các trường 

 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
86 và khẳng định rằng các trạng thái mong đợi đã được chọn. Gói Cypress Lodash cho phép chúng tôi ánh xạ từng đối tượng tới thuộc tính của nó một cách trang 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']
}]
2
Yêu cầu Select2 cung cấp các mục đã chọn và xác nhận danh sách tên tiểu bang

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']
}]
3

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']
}]
4

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

Kiểm tra không thành công mặc dù hiển thị đúng tên người dùng trong danh sách

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 

 

     Select User 
     Yogesh singh 
     Sonarika Bhadoria 
     Anil Singh 
     Vishal Sahu 
     Mayank Patidar 
     Vijay Mourya 
     Rakesh sahu
87, bài kiểm tra "rơi" vào bẫy. Nó tìm thấy phần tử giữ chỗ đang tải và sau đó chỉ tìm kiếm phần đó của DOM, trong khi danh sách thực được tạo trong một phần tử DOM khác. Bạn có thể thấy vấn đề bằng cách di chuột qua nút "get. lệnh select2-results__option"

lệnh get hiển thị phần tử chúng tôi đang tìm kiếm

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']
}]
5

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']
}]
6 và trình bao bọc Select2 của nó cũng như cách các bài kiểm tra đầu cuối của Cypress có thể hoạt động trong cả hai tình huống

Select2 hoạt động như thế nào?

Select2 cung cấp cho bạn hộp chọn có thể tùy chỉnh với hỗ trợ tìm kiếm, gắn thẻ, tập dữ liệu từ xa, cuộn vô hạn và nhiều tùy chọn được sử dụng nhiều khác. .
bằng ngôn ngữ của bạn. Select2 có hỗ trợ cho môi trường RTL, tìm kiếm bằng dấu phụ và hơn 40 ngôn ngữ được tích hợp sẵn
Hỗ trợ dữ liệu từ xa. .
theo chủ đề

Làm cách nào để lấy giá trị đã chọn từ select2?

Các mục đã chọn cũng có thể được truy cập thông qua. bộ chọn jQuery đã chọn. $['#mySelect2']. tìm['. đã chọn'];

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.

Làm cách nào để sử dụng select2 trong danh sách thả xuống?

Tải xuống và bao gồm. Tải xuống plugin Select2 từ đây. Bao gồm select2. .
HTML. Create two with similar options. .. .
Script. Initialize select2 on . .. .
Thử nghiệm. Xem bản trình diễn
Phần kết luận. Truyền giá trị vào val[] để đặt tùy chọn đã chọn với jQuery nhưng cũng cần gọi select2[]

Bài Viết Liên Quan

Kiểm tra PHP nếu tệp được đính kèm
Cao đẳng Tshwane North Tvet có nhận đơn đăng ký năm 2023 không?
Tiêu đề plugin WordPress
Cách trích xuất dữ liệu cụ thể từ pdf trong python?
Start school year 2023 Santa Fe
JavaScript đọc từng dòng tệp
Kiểm tra xem chuỗi có phải là Base64 Java không
Tài liệu học excel văn phòng
Hàm trong lập trình PHP là gì?
Não mô cầu BC tiêm bao nhiêu mũi?
Python với kết nối cơ sở dữ liệu câu lệnh
Ngôn ngữ tốt nhất cho tự động hóa Excel
What will happen to house prices in 2023 UK
Bootstrap 5 dạng codepen
Đăng nhập vào php xampp
Cách lưu trữ chuỗi trong danh sách trong python
Khi nào tôi có thể đặt trước Ford f150 Lightning 2023?
Bootstrap CDN 4
Xuất QuickBooks sang Excel tạo bảng tính mới bị mờ đi
Giữa có bao gồm các điểm cuối mysql không?

Toplist mới

#1
Top 4 uống nước chanh sả mật ong có tác dụng gì 2023
6 tháng trước
#2
Top 10 bài tập làm văn số 5 lớp 7 de 4 2023
6 tháng trước
#3
Top 3 vừa chơi đã có tài khoản vương giả chap 1 2023
6 tháng trước
#4
Top 6 anh sẽ on thôi cover phạm nguyên ngọc lyrics 2023
6 tháng trước
#5
Top 7 tài liệu quản lý nhà nước và quản lý ngành giáo dục đào tạo 2023
6 tháng trước
#6
Top 7 hãy ra khỏi người đó đi hợp âm 2023
6 tháng trước
#7
Top 6 giáo án thơ về thăm nhà bác 2023
6 tháng trước
#8
Top 8 giáo án ngữ văn 6 cánh diều 2023
6 tháng trước
#9
Top 9 tinh bột tham gia phản ứng nào 2023
6 tháng trước

Bài mới nhất

Sợ vợ có gì sai sai vợ là ăn đòn năm 2024
Viết một đoạn văn ngắn nói về tình mẫu tử năm 2024
Bài tập về dòng điện trong điện môi năm 2024
Sốt siêu vi có biểu hiện như thế nào năm 2024
Hóa thân thành người lính trong bài thơ đồng chí năm 2024
Văn kể về gia đình em lớp 6 năm 2024
Lỗi e00 máy ép miệng cốc tự đông năm 2024
Doanh thu bán hàng trong tiếng anh là gì năm 2024
Dịch vụ homestay khi di du hoc là gì năm 2024
Toán lớp 5 học kì 2 năm 2023 năm 2024

Chủ Đề

programming Hỏi Đáp Mẹo Hay Toplist Là gì Địa Điểm Hay Học Tốt mẹo hay Công Nghệ Nghĩa của từ Bao nhiêu Khỏe Đẹp đánh giá Top List bao nhieu bao nhiêu hướng dẫn So Sánh Tiếng anh Bài tập So sánh Xây Đựng Sản phẩm tốt Ngôn ngữ Bài Tập Máy tính javascript Ở đâu Thế nào Hướng dẫn Dịch Tại sao Đại học Món Ngon Facebook Khoa Học