Change Frame với Selenium trong WPF

Dẫn nhập

Trong bài trước, Kteam đã giới thiệu đến bạn cách TURN OFF WEBRTC TRONG SELENIUM.

Ở bài này, Kteam sẽ giới thiệu tới bạn cách Change Frame 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 những nội dung sau đây:

• Frame trong HTML là gì?
• Change frame trong Selenium.

---

Frame trong HTML là gì?

Khi lập trình website, các lập trình viên đôi khi nhúng IFrame vào website của mình. Tác dụng của các IFrame này là hiển thị một đoạn code HTML load sau. Như bạn nhúng trình xem video của Youtube vào website, đó chính là một IFrame khi xuất ra HTML. Hay sâu hơn một chút thì trang chọn video thêm vào playlist của Youtube cũng là một IFrame.

Nhưng nhắc đến IFrame ở đây để làm gì? 

Vì chúng ta dùng Selenium để bắt các IFrame này một cách bình thường là không thể. Hay nói đúng hơn! Bạn có thể bắt các IFamre này, nhưng không thể làm gì bên trong nó cả. Nó như một website khác tách biệt hoàn toàn với website bạn đang kiểm thử khi dùng Selenium. Lúc này, kỹ thuật Change Frame, Change Window ra đời.

Để bắt được các Element con trong các IFrame, chúng ra cần phải chuyển Frame đang active sáng frame đó!

---

Change Frame trong Selenium

Đầu tiên, chúng ta đi vào một ví dụ cụ thể trường hợp cần làm. Mình mong muốn nhấn vào nút Youtube tại một bài viết ở website HowKteam.com. Cụ thể nhấn trong nút trong hình:

Chúng ta thử bóc tách code HTML để lấy ra các element mình cần. Đoạn code Selenium hoàn chỉnh cho việc này mình đã làm:

Đoạn code trong event Button_Click dùng từ các bài trước:

// khởi tạo WebDriver
FirefoxDriver firefoxDriver = new FirefoxDriver();

// chuyển trang đến website howkteam.com
firefoxDriver.Url = "http://www.howkteam.vn/course/note--tips--trick--net/thao-tac-voi-excel-trong-c-1575";
firefoxDriver.Navigate();
            
// bắt ra trình play video của youtube có id là ytplayer
var youtubePlayer = firefoxDriver.FindElementById("ytplayer");
            
// click vào nó để phát video -> hiện ra button youtube để nhấn
youtubePlayer.Click();
            
// tìm ra nút youtube và nhấn vào nó để chuyển qua youtube
var youtube = firefoxDriver.FindElementByCssSelector(".ytp-youtube-button");
youtube.Click();

Chúng ta chạy thử & xem kết quả:

Visual báo lỗi không thể tìm thấy thằng nào có CSS là .ytp-youtube-button

Thật vô lý dù khi F12 lấy code chúng ta thấy Element này nằm ngay đó.

Nếu để ý một chút bạn sẽ thấy nó là con của IFrame có id là ytplayer.

Vậy có thể vấn đề chính là do chúng ta đang không active cái IFrame đó. Vậy để change qua cái IFrame đó, chúng ta làm như sau. Thật ra là chỉ thêm một đoạn code nhỏ.

// change qua frame của ytplayer
    firefoxDriver.SwitchTo().Frame(youtubePlayer);

Code hoàn chỉnh như sau:

// khởi tạo WebDriver
FirefoxDriver firefoxDriver = new FirefoxDriver();

// chuyển trang đến website howkteam.com
firefoxDriver.Url = "http://www.howkteam.vn/course/note--tips--trick--net/thao-tac-voi-excel-trong-c-1575";
firefoxDriver.Navigate();
            
// bắt ra trình play video của youtube có id là ytplayer
var youtubePlayer = firefoxDriver.FindElementById("ytplayer");
            
// click vào nó để phát video -> hiện ra button youtube để nhấn
youtubePlayer.Click();

// change qua frame của ytplayer
firefoxDriver.SwitchTo().Frame(youtubePlayer);
// tìm ra nút youtube và nhấn vào nó để chuyển qua youtube
var youtube = firefoxDriver.FindElementByCssSelector(".ytp-youtube-button");
youtube.Click();

Để change frame thì chúng ta có thể dùng lệnh firefoxDriver.SwitchTo().Frame (element là iframe của bạn)

Ngoài ra còn nhiều cách khác:

this.driver.SwitchTo().Frame(1);

this.driver.SwitchTo().Frame("frameName");

IWebElement element = this.driver.FindElement(By.Id("id"));

this.driver.SwitchTo().Frame(element);

Ngoài ra, bạn còn có thể change cửa sổ đang mở của trình duyệt bằng code này:

ReadOnlyCollection<string> windowHandles = driver.WindowHandles;
string firstTab = windowHandles.First();
string lastTab = windowHandles.Last();
driver.SwitchTo().Window(lastTab);

Bạn có thể tham khảo bài note về Selenium tại link bên dưới

Selenium FirefoxDriver ChromeDriver .Net | Notes

Cùng chạy và kiểm tra kết quả nhé!

Vậy là chúng ta đã nắm được cách để chuyển IFrame và giải quyết một bài toán khó sẽ hay gặp phải khi thao tác với Selenium.

---

Kết luận

Qua bài này, các bạn đã biết chuyển Frame trong Selenium như thế nào.

Ở bài sau, Kteam sẽ nói về UPLOAD FILE 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ó!”

---

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.