NOTE: Bài khá dài, hãy chuẩn bị nước, đồ ăn vặt và cả thời gian nữa. ^^

Theo 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 “Delete Post”, có 2 nguyên nhân:

1. Khi test, chúng ta cần phải test chức năng Delete bài viết
2. Khi làm việc với automation, ta sẽ tạo ra rất nhiều dữ liệu rác, ta cần phải có hành động dọn dẹp sau mỗi lần tạo ra. Thực ra thì còn cách khác, đó là DB roll-back nhưng mà hiện tại đang nói về Selenium nên kỹ thuật DB roll-back mình không quan tâm.

Trước tiên ta phải xác định xem cái Delete Post nằm ở chỗ nào.

Nó nằm ở button Trash ở trong Page AllPosts.

Các test steps cho Test Case này sẽ là:

1. Login
2. Tạo 1 bài viết mới
3. Trở về trang All Posts
4. Tìm bài viết đã tạo, ấn button Trash
5. Kiểm tra bài viết có còn ở trong All Posts nữa không?

Bước 1 và 2 đã được làm ở các bài trước.

Bước 3: Ta có 2 cách

• Open URL: http://localhost/wp/wp-admin/edit.php
• Click vào link ở Navigation trái

Ở đây, để cho đơn giản, mình sẽ vẫn sử dụng cách open URL để lại phần Navigation thành một bài riêng.

Bước 4: WordPress sau khi tạo bài viết mới thì bài viết đó sẽ nằm ở vị trí đầu tiên, trên trang 1 của All Posts. Do đó ta chỉ cần tìm đến vị trí bài viết đầu tiên, sau đó click button Trash.

Bước 5: Có nhiều điều kiện kiểm tra:

• So sánh title của bài viết đầu tiên với title của bài viết vừa xóa. Khác nhau là đã xóa thành công, giống nhau là chưa xóa được. Đây là lý do vì sao mình nên add thêm cái thời gian Milisecond ở phía sau mỗi Post, nó sẽ làm Title của post đó trở thành duy nhất
• Kiểm tra title bài viết đầu tiên trong folder Trash với title với bài viết vừa xóa.
• Kiểm tra bài viết mới tạo có còn tồn tại ngoài Front-end không?

Bạn có thể chọn 1 hoặc kết hợp 2,3 điều kiện, tùy vào mức độ lười và cái bạn thích. =)))) Mình sẽ hướng dẫn 1 cách thôi, 2 cách còn lại các bạn tự làm.

Các chức năng DeletePost nằm ở trên Page All Posts nên ta phải tạo ra 2 class AllPostsPage và AllPostsTest. Sau đó, ta implement đến hết bước 3.

Đoạn này các bạn nên tự làm, cho quen, nếu lười quá thì xem code của mình:

Class AllPostsPage :

public class AllPostsPage {

	WebDriver driver;

	public AllPostsPage(WebDriver driver) {
		this.driver = driver;
		PageFactory.initElements(driver, this);
	}

	public boolean isDisplayed() {
		if (Links.URL_ALL_POSTS.equals(driver.getCurrentUrl())) {
			return true;
		} else {
			return false;
		}
	}
}

Class AllPostsTest:

public class AllPostsTest extends BaseTest {
	LoginPage loginPg;
	AddNewPostPage addNewPg;

	@Test
	public void deletePostFirstRow() {
        //Khởi tạo 2 pages
		loginPg = new LoginPage(driver);
		addNewPg = new AddNewPostPage(driver);

		loginPg.login("giang", "123456789");
        
        //Tạo bài viết mới rồi back về All Post Page
		driver.get(Links.URL_ADD_NEW);
		addNewPg.addANewPost(title, body);
		driver.get(Links.URL_ALL_POSTS);
	}
}

Bước 4: Click vào link “Trash” để delete Post, ta cùng sửa lại cả 2 class trên:

public class AllPostsPage {

	...
	
	@FindBy(css = "#the-list > tr:nth-of-type(1) .submitdelete")
	private WebElement deleteBtn;

	...
	
	public void deleteFirstRowPost() {
		deleteBtn.click();
	}
}

Vì sao mình lại có thể xác định được cái css thế kia, các bạn hãy đọc lại bài 3 nhé.

@Test
public void deleteFirstPost() {
	//Khởi tạo 2 pages
    loginPg = new LoginPage(driver);
    addNewPg = new AddNewPostPage(driver);

    loginPg.login("giang", "123456789");
    
    //Tạo bài viết mới rồi back về All Post Page
    driver.get(Links.URL_ADD_NEW);
    addNewPg.addANewPost(title, body);
    driver.get(Links.URL_ALL_POSTS);
    
    //Xóa bài viết đầu tiên
	allPostsPg.deleteFirstRowPost();
}

Trước khi đến bước Assert, ta cần phải manual verify xem script đã delete được post hay chưa.

Và đây là kết quả:

Thật tuyệt vời, lỗi cmnl rồi và là lỗi mới toanh. =)))))

• Tips: Khi gặp lỗi mà dạng Exception mà thuộc Selenium, quay lại đọc docs API ngay, sẽ biết đấy là dạng lỗi nào, khỏi cần google.

Trong trường hợp này là ElementNotInteractableException, cho biết rằng mặc dù Element đã xuất hiện trên DOM nhưng mà ở trạng thái không thể tương tác được.

Lý do vì sao không tương tác được: vì ta phải hover chuột vào đó, cái chữ Trash nó mới hiện lên, chứ bình thường nó bị ẩn đi. —> việc cần làm là script hover chuột vào dòng đầu tiên.

Để mô phỏng hành động hover chuột vào một vị trí ta cần phải sử dụng 1 Class có tên là Actions. Class này chứa những API để làm những tương tác phức tạp mà interface WebElement không cung cấp. Ta có thể implement nó như sau:

public class AllPostsPage {

	WebDriver driver;
	Actions action;
	
	@FindBy(css = "#the-list > tr:nth-of-type(1) .submitdelete")
	private WebElement deleteBtn;

	@FindBy(css = "#the-list > tr:nth-of-type(1) .title")
	private WebElement firstRow;
	
	public AllPostsPage(WebDriver driver) {
		this.driver = driver;
		action = new Actions(driver);
		PageFactory.initElements(driver, this);
	}

	...
	
	public void deleteFirstRowPost() {
		action.moveToElement(firstRow).perform();
		deleteBtn.click();
	}
}

Và sau đó ta run lại Test và manual verify nhé. 😀

Bước 5: Viết lệnh Assert.

• So sánh title của bài viết đầu tiên với title của bài viết vừa xóa.

Ta sẽ cần có 1 method lấy cái title của của bài viết đầu tiên.

public class AllPostsPage {
	...
	public String getTitleFirstPost() {
		return firstRow.getText();
	}
}

Và thêm 1 dòng Assert vào trong TestCase, ở đây mình sử dụng assertNotEquals

@Test
public void deleteFirstPost() {
	//Khởi tạo 2 pages
    loginPg = new LoginPage(driver);
    addNewPg = new AddNewPostPage(driver);

    loginPg.login("giang", "123456789");
    
    //Tạo bài viết mới rồi back về All Post Page
    driver.get(Links.URL_ADD_NEW);
    addNewPg.addANewPost(title, body);
    driver.get(Links.URL_ALL_POSTS);
    
    //Xóa bài viết đầu tiên
	allPostsPg.deleteFirstRowPost();
	Assert.assertNotEquals(allPostsPg.getTitleFirstPost(), title);
}

Phù, cuối cùng đã xong, những bài tiếp theo là những bài liên quan đến đến refactor và cấu trúc code, sẽ rất hữu ích, trước khi chúng ta viết tiếp những Test Case mới.