Element bị che / không thể tương tác là tình huống:
Element vẫn tồn tại trên giao diện và có thể tìm thấy bằng locator,
nhưng khi automation không thể tương tác được vì bị một thành phần khác che lên trên hoặc đang bị chặn tương tác.
1. Nguyên nhân phổ biến
1.1 Có overlay / popup / loading che lên
Ví dụ:
-
loading spinner
-
modal
-
toast
-
dialog
Element bên dưới vẫn tồn tại nhưng bị che bởi một layer khác.
1.2 Animation / transition chưa kết thúc
UI có hiệu ứng:
-
slide
-
fade
-
expand
Trong lúc animation chưa xong, element:
-
chưa nằm đúng vị trí
-
hoặc đang bị lớp khác phủ lên
1.3 Element chưa ở trạng thái có thể tương tác
Trường hợp thường gặp:
-
button đang bị
disabled -
form chưa validate xong
-
điều kiện enable chưa được trigger
1.4 Scroll chưa tới vị trí của element
Element:
-
nằm ngoài viewport
-
hoặc bị sticky header / footer che
1.5 Front-end render lại trong lúc click
-
re-render đúng thời điểm click
-
element cũ bị detach
-
hoặc bị thay bằng node khác
2. Cách khắc phục (thực tế nên làm)
2.1 Chờ cho overlay / loading biến mất
Không chỉ chờ element xuất hiện, mà phải:
-
chờ overlay không còn tồn tại
-
hoặc không còn hiển thị
Ví dụ logic:
→ chờ spinner invisible
→ rồi mới click
2.2 Chờ element ở trạng thái có thể click
Không chỉ “exists” hay “visible”.
Phải là:
-
enabled
-
clickable
2.3 Scroll element vào vùng nhìn thấy
Đảm bảo element:
-
nằm trong viewport
-
không bị header che
2.4 Tránh click khi animation đang chạy
Nếu UI có animation:
-
thêm wait nhỏ cho transition hoàn tất
-
hoặc chờ state ổn định của element
2.5 Kiểm tra thuộc tính disabled / aria-disabled
Nhiều UI:
-
hiển thị giống enabled
-
nhưng vẫn bị disabled về mặt DOM