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