Bỏ qua

Bài Tập 2: Đánh Giá Locator

Yêu Cầu

Cho đoạn HTML sau, chọn locator tốt nhất và giải thích tại sao.

Đề Bài

Câu 1: Nút Submit

<button
  data-testid="submit-order"
  id="btn-submit"
  class="btn btn-success"
  aria-label="Submit Order"
>
  Place Order
</button>

Chọn locator tốt nhất:

  • [ ] [data-testid="submit-order"]
  • [ ] #btn-submit
  • [ ] .btn.btn-success
  • [ ] [aria-label="Submit Order"]
  • [ ] text=Place Order

Giải thích:

[Viết giải thích ở đây]

Câu 2: Ô Input Email

<input
  type="email"
  name="email"
  id="user-email"
  class="form-control"
  placeholder="Enter your email"
  data-testid="email-input"
/>

Chọn locator tốt nhất:

  • [ ] [data-testid="email-input"]
  • [ ] #user-email
  • [ ] [name="email"]
  • [ ] [placeholder="Enter your email"]
  • [ ] .form-control

Giải thích:

[Viết giải thích ở đây]

<a
  href="/shop"
  class="nav-link"
  data-testid="shop-link"
>
  Shop
</a>

Chọn locator tốt nhất:

  • [ ] [data-testid="shop-link"]
  • [ ] a[href="/shop"]
  • [ ] .nav-link
  • [ ] text=Shop

Giải thích:

[Viết giải thích ở đây]

Câu 4: Element không có data-testid

<div class="product-card">
  <h3 class="product-title">HTML5 Forms</h3>
  <span class="price">$18.00</span>
  <button class="add-to-cart">Add to basket</button>
</div>

Chọn locator tốt nhất cho nút "Add to basket":

  • [ ] .add-to-cart
  • [ ] text=Add to basket
  • [ ] button:has-text("Add to basket")
  • [ ] .product-card button

Giải thích:

[Viết giải thích ở đây]

Câu 5: Element với ID động

<div
  id="ember123"
  class="ember-view notification"
  data-notification-id="456"
>
  <span class="message">New order received</span>
</div>

Chọn locator tốt nhất:

  • [ ] #ember123
  • [ ] .notification
  • [ ] [data-notification-id="456"]
  • [ ] text=New order received

Giải thích:

[Viết giải thích ở đây]

Bảng Tổng Hợp

Câu Element Locator chọn Ưu tiên Điểm ổn định
1 Nút Submit ? ? ?/5
2 Ô Email ? ? ?/5
3 Link Nav ? ? ?/5
4 Nút Add to Cart ? ? ?/5
5 Notification ? ? ?/5

Nộp Bài

  • [ ] Trả lời tất cả câu hỏi
  • [ ] Bảng tổng hợp
  • [ ] Giải thích cho mỗi lựa chọn