[Bài 11] WebDriver script đơn giản thứ hai

Những Testcase của phần login còn khá nhiều, nhưng cách xử lý nó cũng tương tự như vậy. Bạn có thể viết tiếp những case còn lại để thực hành những gì đã học ở các bài trước. Nếu có vấn đề mà không biết xử lý thế nào, bạn có thể đặt lại comment xuống phía dưới.

Hôm nay ta sẽ tiếp tục đến với 1 script mới vì ai mà chả biết là login viết như thế nào, tutorials trên mạng chém không hết. Nhiệm vụ của chúng ta lần này là phải “tạo mới bài viết thành công”. Nhiệm vụ như hình:

Các test steps mà chúng ta phải thực hiện:

  1. Login thành công
  2. Vào page “Add New”
  3. Điền Title và Body của bài viết
  4. Click Publish
  5. Kiểm tra xem bài viết đã được publish hay chưa

Trước khi bắt đầu viết thì mình cần phải nhắc điều này. Nhiều bạn khi bắt đầu học thì hay có xu hướng viết tất cả những test trong cùng 1 class, nhưng chúng ta nên tách chúng ra giống như ta tách các phần khi viết Test case vậy. Ta sẽ tạm viết thêm 1 Class có tên là AddNewPostTest. Class này cũng sẽ thừa kế từ class BaseTest ở bài trước.


1. Phần Login thành công chúng ta đã làm từ bài trước rồi, chỉ cần copy sang là xong. Code hiện tại sẽ là


2. Chỗ này có 2 cách:

  • Sử dụng Navigation bar ở bên trái. Click “Posts” —> Click “Add New”
  • Vào thẳng URL giống như vào trang login

Trong TH này, để đơn giản mình sẽ sử dụng cách thứ 2 để đơn giản, cách 1 mình sẽ hướng dẫn cách bạn vào 1 bài khác.


3. Phần điền Title và Body chắc cũng như điền username và password. Chỉ cần xác định xem vị trí của chúng ở đâu rồi sendkey vào là đc.

Thật không may, điều đó chỉ đúng với phần Title. Phần Body lại hoàn toàn khác.

Mặc dù bạn thấy là bạn đã lấy đúng id, nhưng mà nó sẽ không sendkey được. Bạn run thử và nó văng ra lỗi “Unable to locate element: #tinymce“.

Nguyên nhân là do cái Element đó nó không hề thuộc về DOM của trang web, nó là Element của 1 cái Frame. Hiểu đơn giản: Frame là 1 thành phần bên ngoài được nhúng vào trong trang web.

Để thực hiện được action vào 1 Element trong frame thì phải chuyển cái driver sang frame trước. Sau khi thực hiện xong action với Element trong frame, chúng ta phải đưa cái driver trở về với cái site ta đang làm việc.


4. Chỉ là click vào button Publish


5. Trong test case, các bạn định nghĩa thế nào là push 1 bài viết thành công, có phải là expected result giống như thế này:

  • Bài viết đó phải hiện thị ngoài Front-end
  • Bài viết đó phải có trong list các bài viết ở trang “All Posts”
  • Bài viết phải được lưu đúng thông tin và vị trí trong Database

Mục 3 bỏ qua vì Selenium giúp UI automation, nó sẽ không động vào Database.

Mục 1 và mục 2 ok. Nhưng để giới hạn cái bài hướng dẫn này mình chỉ hướng dẫn các bạn làm theo mục 1. Mục 2 mình sẽ viết vào bài sắp tới.

  • Bài viết đó phải hiện thị ngoài Front-end

Bạn tạo thử bài viết manual và thấy rằng: sau khi publish thành công thì ở phía trên của bài viết sẽ có link đến bài viết.

Nhiệm vụ của bạn là click vào link đó rồi kiểm tra nội dung bài viết, đã được hiển thị. Lại nói về kiểm tra, phức tạp vãi, biết lấy cái gì để kiểm tra bây giờ. 🙁 Thôi mình để gọn nhẹ, mình chỉ so sánh cái tiêu đề thôi nhé, cho đỡ mất thời gian.

Mình đã sử dụng cách tìm vị trí của link “View Post” bằng cssSelector, bạn nào chưa biết cách sử dụng chúng thì đọc lại bài này nhé.

Code cuối cùng đây:

Hầy, xong 1 test case với rất nhiều bước, cảm thấy tự hào vì mình đã hoàn thành được 1 test mà nếu làm manual mất vài phút, bây giờ chỉ còn vài giây. 😀

Sau khi nhìn lại vào test case, ta lại nhận thấy vài vấn đề mà bài 9 đã nhắc đến nhưng chưa xử lý được:

  • Lặp code Function login.
  • Đây là Class để test riêng cái chức năng của page “Add New”, lại có cả những Element của page “Login”. Cảm thấy khá rối.
  • Chẳng nhẽ lúc nào test với cái Title và Body như vậy? Có cách nào tạo data test tự động không?
  • Nhìn vào test method, bạn chả biết là bạn đang làm cái gì nữa. =))))

Bài này dài rồi, bài sau sẽ refactor code xử lý problem sau nhé.

[Bài 12] Refactor code dựa vào việc sử dụng POM (Page Object Model)

16 thoughts on “[Bài 11] WebDriver script đơn giản thứ hai

  1. Pingback: [Bài 10] Ý nghĩa của class base | GiangTester Blog

  2. Pingback: [Bài 12] Refactor code dựa vào việc sử dụng POM (Page Object Model) | GiangTester Blog

  3. Pingback: [Bài 13] Tạo dummy data và sử dụng Unit Test | GiangTester Blog

  4. A Giang cho em hỏi chút ạ:
    Em có làm theo hướng dẫn của anh, nhưng bị báo lỗi không tìm thấy locator cssSelector(“#message a”), chỗ này em nghĩ cần thêm câu lệnh chờ wait để load ra phần tử đó trên trang web, nhưng e thêm câu lệnh wait rồi mà nó vẫn k chạy được :((

  5. Pingback: [Bài 14] Sử dụng Dummy Data vào trong TestCase và Fix trường hợp Unable to locate element | GiangTester Blog

  6. Mình có thể tạo 1 file csv chứa các trường hợp login rồi chạy từng row như từng case trong đó ko?

  7. Pingback: [Bài 19] Webdriver script đơn giản thứ ba | GiangTester Blog

    • Hi em, trước tiên em đọc thêm các bài viết của anh ở phía sau đã để biết cách refactor lại code ở chỗ addPost này. Add tự động 5 bài thì chỉ cần call lại cái method addNewPost 5 lần là được.

Leave a Reply

Your email address will not be published. Required fields are marked *