[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à

public class AddNewPostTest extends BaseTest{
	
	String URL_dashBoard = "http://localhost/wp/wp-admin/";
	String user_login = "user_login";
	String user_pass = "user_pass";
	String submitBtn = "wp-submit";

	public void login(String userName, String password) {
		driver.findElement(By.id(user_login)).sendKeys(userName);
		driver.findElement(By.id(user_pass)).sendKeys(password);
		driver.findElement(By.id(submitBtn)).click();
	}

}

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.

driver.get("http://localhost/wp/wp-admin/post-new.php");

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.

@Test
public void addNewPost(){
	login("giang", "123456789");
	driver.get("http://localhost/wp/wp-admin/post-new.php");
	driver.findElement(By.id("title")).sendKeys("This is a title");
	driver.findElement(By.id("tinymce")).sendKeys("This is the body");
}

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.

driver.switchTo().frame("content_ifr");
driver.findElement(By.id("tinymce")).sendKeys("This is the body");
driver.switchTo().defaultContent();

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

driver.findElement(By.id("publish")).click();

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.

driver.findElement(By.cssSelector("#message a")).click();
String title = driver.findElement(By.tagName("h1")).getText();
Assert.assertEquals(title, "This is a title");

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:

import org.openqa.selenium.By;
import org.testng.Assert;
import org.testng.annotations.Test;

public class AddNewPostTest extends BaseTest {

	String URL_dashBoard = "http://localhost/wp/wp-admin/";
	String user_login = "user_login";
	String user_pass = "user_pass";
	String submitBtn = "wp-submit";

	public void login(String userName, String password) {
		driver.findElement(By.id(user_login)).sendKeys(userName);
		driver.findElement(By.id(user_pass)).sendKeys(password);
		driver.findElement(By.id(submitBtn)).click();
	}

	@Test
	public void addNewPost() {
		driver.get("http://localhost/wp/wp-admin/post-new.php");
		login("giang", "123456789");
		driver.findElement(By.id("title")).sendKeys("This is the title");
		driver.switchTo().frame("content_ifr");
		driver.findElement(By.id("tinymce")).sendKeys("This is the body");
		driver.switchTo().defaultContent();
		driver.findElement(By.id("publish")).click();
		driver.findElement(By.cssSelector("#message a")).click();
		String title = driver.findElement(By.tagName("h1")).getText();
		Assert.assertEquals(title, "This is the title");
	}

}

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é.

0 0 votes
Article Rating
Subscribe
Notify of
guest
19 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback

[…] ← Previous Next → […]

trackback

[…] Bài này dành ra để xử lý 1 vấn đề của bài 11. […]

Tiểu Anh
Tiểu Anh
4 years ago

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 :((

Tiểu Anh
Tiểu Anh
4 years ago
Reply to  Giang Nguyen

nhờ bài 14 của anh mà e chạy đc rùi : )) cảm ơn a ạ 😀

Tiểu Anh
Tiểu Anh
4 years ago
Reply to  Giang Nguyen

anh ơi a ra nhiều bài mới nữa đi anh. Chứ 1 ngày trung bình em vào blog của anh cỡ chục lần quá :v hí hí
Tại vì văn chương trong từng bài của anh nó đánh đúng vào sự băn khoăn của những đứa mới bắt đầu học selenium như em :v

trackback

[…] mình run chậm hơn rất nhiều và vẫn bị lỗi cũ (một bạn đã hỏi mình ở bài 11). Mình quyết định manual run lại và quan sát thật kỹ để xem lỗi là gì và […]

Thu Thuy
Thu Thuy
4 years ago

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?

Thu Thuy
Thu Thuy
4 years ago
Reply to  Giang Nguyen

Hóng đần bài viết mới của Giang 😀

trackback

[…] luồng test, ta đã đi qua Login –> AddNewPost. Bây giờ, ta sẽ thêm 1 hành động mới nữa, đó là DeletePost. Vì sao phải […]

Le Thi Thu Hong
Le Thi Thu Hong
4 years ago

cho e hoi neu e muon add tu dong 5 bai post lien tuc thi phai lam nhu the nao a?
E cam on a a

Nguyen Thi Hoi
Nguyen Thi Hoi
1 year ago

Anh ơi, cho em hỏi xíu được không ạ, Em viết 4 testcase trên cùng 1 bài, test chức năng đăng nhập, thứ tự là, testcase thiếu mật khẩu . thiếu mã đăg nhập, nhập mã đn và mật khẩu không hợp lệ, sau đó là login thành công vào hệ thống, Nhưng sau khi em RUN, nó k chạy theo trình tự đó, nó chạy test case 1, rồi test case 4, Đảo lộn nên giờ test em báo fail. Bây giờ em xử lí như nào ạ.