Excute JavaScript với Selenium trong WPF

Dẫn nhập

Trong bài trước, Kteam đã giới thiệu đến bạn THAO TÁC CƠ BẢN VỚI SELENIUM – một thư viện tuyệt vời cho việc Auto WebBrowser.

Ở bài này, chúng ta sẽ tiếp tục tìm hiểu Cách Execute một đoạn JavaScript với Selenium trong WPF.

Nội dung

Để đọc hiểu bài này tốt nhất, bạn cần: 

• Cài đặt sẵn VISUAL STUDIO 2015 hoặc 2017 community
• Xem qua bài TỔNG QUAN VỀ SELENIUM.
• Có kiến thức về C# CƠ BẢN, LẬP TRÌNH OOP trong C#, và LẬP TRÌNH WPF.
• Có kiến thức HTML cơ bản.
• Có kiến thức cơ bản về JavaScript.

Trong bài này, chúng ta sẽ cùng tìm hiểu: 

• Thực thi một đoạn JavaScript với Selenium.
• Lấy kết quả từ JavaScript.

Thực thi một đoạn JavaScript với Selenium

Chúng ta sẽ dùng lại Project của bài trước để thực hiện bài này nhé! Bạn có thể tìm thấy Project trong bài THAO TÁC CƠ BẢN VỚI SELENIUM

Mở project lên > Trong code MainWindow.xaml.cs, chúng ta bỏ (thẳng tay xóa!) các đoạn code có sẵn này đi: 

// tìm đối tượng theo ID
var searchBar = firefoxDriver.FindElementById("searchUI");
            
// gõ giá trị Selenium Kteam vào thanh tìm kiếm
searchBar.SendKeys("Selenium Kteam");

// Lấy tagssearch ra
var tagssearch = firefoxDriver.FindElementById("tagssearch");

// click vào tagssearch
tagssearch.Click();
1
2
3
4
5
6
7
8
9
10
11
12

Chúng ta bắt đầu thử nghiệm một đoạn JavaScript ngay trên website Howkteam.com bằng cách dùng Console của trình duyệt.

Mở trình duyệt > vào website Howkteam.com > Nhấn F12 > Nhấn vào tab Console( Bảng điều khiển).

Cụ thể mình sẽ thử chạy một đoạn JavaScript có mục đích lấ giá trị của chữ Giáo dục là miễn phí và xuất hiện lên alert dialog trên trình duyệt. Bằng cách dán đoạn JavaScript sau vào Console của Firefox hoặc Chrome.

var content = document.getElementsByClassName('contentpagetop')[0].children[0].innerHTML;
alert(content);
1
2
3

Lưu ý: nếu Firefox bắt phải gõ một đoạn allow pasting thì bạn cứ gõ vào Console. Đó là cơ chế bảo mật nhẹ của Firefox.

Nhấn Enter và kết quả của đoạn text Giáo dục là miễn phí xuất hiện trong alert dialog.

Giờ chúng ta sẽ thử thực hiện y chang điều này với Selenium nhé! 

Để thực thi JavaScript với FirefoxDriver (ChromeDriver tương tự) chúng ta dùng lệnh sau:

firefoxDriver.ExecuteAsyncScript(“đoạn javaScript muốn thực thi”);

hoặc

firefoxDriver.ExecuteScript(“đoạn javaScript muốn thực thi”);

Cụ thể trong ví dụ này, mình sẽ thực thi đoạn script như sau:

firefoxDriver.ExecuteScript("var content = document.getElementsByClassName('contentpagetop')[0].children[0].innerHTML;alert(content);");
1

Code hoàn chỉnh của event Button_Click

private void Button_Click(object sender, RoutedEventArgs e)
{
#region FirefoxDriver
// khởi tạo WebDriver
FirefoxDriver firefoxDriver = new FirefoxDriver();

// chuyển trang đến website howkteam.com
firefoxDriver.Url = "http://www.howkteam.com/";
firefoxDriver.Navigate();
            
// thực thi JavaScript            
firefoxDriver.ExecuteScript("var content = document.getElementsByClassName('contentpagetop')[0].children[0].innerHTML;alert(content);");


#endregion


#region ChromeDriver
//ChromeDriver chromeDriver = new ChromeDriver();
//chromeDriver.Url = "http://www.howkteam.com/";
//chromeDriver.Navigate();

//firefoxDriver.ExecuteScript("");
#endregion
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Cùng chạy thử chương trình và xem kết quả nào!

Vậy chúng ta đã thành công thực thi một đoạn JavaScript với Selenium. Bạn có thể tự mình thay thế các đoạn JavaScript khác nhé!

Lấy kết quả từ JavaScript

Thực thi được một đoạn JavaScript rồi thì thật tuyệt! Vậy để lấy giá trị của đoạn JavaScript đó ra thì chúng ta làm sao? Cùng Kteam tìm hiểu nhé! 

Để lấy được kết quả JavaScript chúng ta cần dùng interface IJavaScriptExecuter và trong đoạn JavaScript cần return giá trị muốn lấy ra. Sau đó, bạn cần ép kiểu tường minh cho dữ liệu lấy ra của bạn( Cùng một phương thức cho Chrome và Firefox). Như ví dụ dưới đây:

// thực thi JavaScript dùng IJavaScriptExecutor
IJavaScriptExecutor js = firefoxDriver as IJavaScriptExecutor;
// javascript cần return giá trị.
var dataFromJS = (string)js.ExecuteScript("var content = document.getElementsByClassName('contentpagetop')[0].children[0].innerHTML;return content;");
MessageBox.Show(dataFromJS);
1
2
3
4
5

Đoạn code trên sẽ lấy giá trị Giáo dục là miễn phí ra và hiển thị lên MessageBox của C#.

Cùng chạy chương trình kiểm chứng kết quả nhé!

Và chúng ta đã thành công lấy giá trị từ JavaScript. Bàn hoàn toàn có thể lấy các giá trị khác với kiểu dữ liệu khác với cùng cách này. Hãy tự mình thử nghiệm nhé. Good luck!

Kết luận

Bài viết này đã sơ lược cho các bạn Cách thực thi và lấy dữ liệu từ JavaScript trong Selenium

Ở bài sau, Kteam sẽ giới thiệu về ELEMENT TRONG SELENIUM.

Cảm ơn bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó!”

---

Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Excute JavaScript với Selenium trong WPF dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Project

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới!

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM

GROUP THẢO LUẬN FACEBOOK