Khóa học Selenium cơ bản đến nâng ca...

Khóa học Selenium cơ bản đến nâng cao

Change Frame với Selenium trong WPF Change Frame với Selenium trong WPF Change Frame với Selenium trong WPF Change Frame với Selenium trong WPF Change Frame với Selenium trong WPF 0/5 (15 reviews)

Change Frame với Selenium trong WPF

Đã đăng 2017-12-31 13:21:41 bởi Kteam
0 bình luận 1936 lượt xem
Change Frame với Selenium trong WPF 0 /5 stars (0 reviews)
 

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:

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.


Project tham khảo

Nếu quá trình thực hành của bạn không diễn ra suôn sẻ như bài hướng dẫn thực hiện, bạn có thể tham khảo Project mẫu của Kteam trong link bên dưới hoặc để lại BÌNH LUẬN để được hỗ trợ nhé!

Đừng quên like hoặc +1 Google để ủng hộ Kteam và tác giả nhé! 


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ó!


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 Change Frame 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 hoặc +1 Google để ủng hộ Kteam và tác giả nhé! 


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. 

 

Chia sẻ:
Thảo luận Hỏi và đáp Báo lỗi bài viết
Hủy bỏ   hoặc  
Hủy bỏ   hoặc  
Hủy bỏ   hoặc  

Chiến dịch

Kteam - Howkteam Free Education