handling iframes using selenium webdriver switchto method
czym jest kontrola jakości i zapewnienie jakości
Obsługa elementów iFrame przy użyciu Selenium WebDriver: praktyczny samouczek z praktycznymi przykładami
iFrame (ramka wbudowana) to dokument HTML osadzony w innym dokumencie HTML.
Ramki iFrame są najczęściej używane do wyświetlania reklam na stronie internetowej. Ramki iFrame są wyraźnie wymienione w dokumencie HTML za pomocą znacznika HTML
Ten samouczek wyjaśni Ci wszystko o obsłudze ramek iframe w Selenium wraz z odpowiednimi przykładami kodu dla łatwego zrozumienia.
=> Przeczytaj serię szkoleń Easy Selenium.
Czego się nauczysz:
- Obsługa ramek iFrame przy użyciu selenu
- AKTUALIZACJA w marcu 2020 r
- Wniosek
Obsługa ramek iFrame przy użyciu selenu
Ramkę iframe na stronie internetowej można zidentyfikować w przeglądarce Firefox, jeśli opcja o nazwie „Ta ramka” jest wyświetlana w opcjach prawego przycisku myszy, jak pokazano poniżej.
Alternatywnie możemy również sprawdzić, czy strona internetowa zawiera elementy iframe, patrząc na kod źródłowy i wyszukując tag
List iframes = driver.findElements(By.tagName(“iframe”));
Metody obsługi ramek iFrame zapewniane przez firmę Selenium
Selenium zapewnia następujące wbudowane metody przełączania między ramkami iframe.
- switchTo.frame (int frameNumber)
- switchTo.frame (string frameName)
- switchTo.frame (WebElement frameElement)
- switchTo (). defaultContent ()
# 1) switchTo.frame (int frameNumber)
- Ta metoda umożliwia użytkownikom przełączanie się do określonej ramki przy użyciu identyfikatora ramki.
- Numer ramki jest wartością indeksu zaczynającą się od zera, co oznacza, że pierwsza ramka strony internetowej ma indeks 0, druga ramka ma indeks 1, a trzecia ramka ma indeks 3 i tak dalej.
- Numer ramki można również zidentyfikować za pomocą identyfikatora ramki elementu. Można to zrobić za pomocą Kliknij prawym przyciskiem myszy -> Sprawdź element i wyszukaj element iFrame. Sprawdź, czy którakolwiek z ramek iFrame ma atrybut ID.
Przykładowy element iframe w kodzie źródłowym wyglądałby tak, jak wspomniano poniżej.
Po zidentyfikowaniu identyfikatora iFrame możemy użyć tego samego, aby przełączyć się na ramkę, jak poniżej.
Przykłady:
driver.switchTo.frame („a077aa5e”);
driver.switchTo.frame (0);
- Ta metoda zgłasza wyjątek NoSuchFrameException, gdy wymagana ramka nie zostanie znaleziona na bieżącej stronie internetowej.
# 2) switchTo.frame (string frameName)
- Ta metoda umożliwia użytkownikom przełączanie się do określonej ramki przy użyciu nazwy ramki zdefiniowanej przez programistę.
- Nazwa ramki musi być ujęta w podwójne cudzysłowy, aby mogła być traktowana jako parametr typu String.
- Ta metoda zgłasza wyjątek NoSuchFrameException, gdy wymagana ramka nie zostanie znaleziona na bieżącej stronie internetowej.
Przykład:
We wspomnianym powyżej kodzie zarówno identyfikator ramki, jak i nazwa ramki mają tę samą wartość. Przełączenie na ramkę można wykonać za pomocą nazwy ramki, jak poniżej:
driver.switchTo.frame („a077aa5e”);
# 3) switchTo.frame (WebElement frameElement)
- Ta metoda umożliwia użytkownikom przełączanie się do ramki na podstawie lokalizacji elementu internetowego.
- Ta metoda zgłasza wyjątek NoSuchFrameException, gdy wymagana ramka nie jest obecna na stronie internetowej i StaleElementReferenceException, jeśli ramka wyświetlana na stronie internetowej nie jest aktywna.
Przykład:
WebElement frameElement = driver.findElement (By.id („a077aa5e”));
driver.switchTo.frame (frameElement);
# 4) switchTo (). DefaultContent ()
- Przełączanie się między elementami iframe i stroną nadrzędną można przełączać się za pomocą metody driver.switchTo (). DefaultContent ().
- Zauważ, że w Selenium istnieje podobna metoda przełączania między ramkami o nazwie driver.switchTo (). ParentFrame ().
- Różnica między driver.switchTo (). DefaultContent () i driver.switchTo (). ParentFrame () polega na tym, że pierwsza metoda przełącza sterowanie na główną stronę internetową niezależnie od liczby ramek na stronie internetowej, podczas gdy druga metoda przełącza kontrolę na ramkę nadrzędną bieżącej ramki.
Przykład:
Załóżmy, że na macierzystej stronie internetowej p1 znajdują się trzy ramki o nazwach i1, i2 i i3. Ramki i1, i2 i i3 są od siebie zależne, co oznacza, że jedna klatka będzie nadrzędna wobec drugiej.
Używając metody driver.switchTo (). DefaultContent () w klatce i3, kontrolka sterownika sieciowego przechodzi do strony nadrzędnej, p1. Podczas gdy metoda driver.switchTo (). ParentFrame () na klatce i3 przełącza sterowanie z powrotem na klatkę i2 i tak dalej.
Przykład kodu źródłowego:
Poniżej znajduje się scenariusz testowy do zautomatyzowania przy użyciu ramek iframe w selenie:
- Otwórz witrynę SoftwareTestingHelp.com.
- Znajdź wszystkie elementy HTML z tagiem iframe, policz liczbę wystąpień elementu iFrame i wydrukuj go na konsoli.
- Przełącz się na prawidłową ramkę na stronie internetowej, używając identyfikatora ramki i wydrukuj kod źródłowy ramki.
- Zamknij bieżące okno przeglądarki.
package Demo; import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; public class iFramesDemo { public static void main(String() args) throws InterruptedException { System.setProperty('webdriver.gecko.driver','D:\Data_Personal\Demo \geckodriver-v0.23.0-win64\geckodriver.exe'); WebDriver driver = new FirefoxDriver(); driver.get('https://www.softwaretestinghelp.com/'); //Finding all iframe tags on a web page List elements = driver.findElements(By.tagName('iframe')); int numberOfTags = elements.size(); System.out.println('No. of Iframes on this Web Page are: ' +numberOfTags); // Switch to the frame using the frame id System.out.println('Switching to the frame'); driver.switchTo().frame('aswift_0'); // Print the frame source code System.out.println('Frame Source' +driver.getPageSource()); // Switch back to main web page driver.switchTo().defaultContent(); driver.quit(); } }
Kod wyjściowy:
Otwórz stronę internetową: https://www.softwaretestinghelp.com
Przełącz się na ramkę o nazwie aswift_0.
Wydrukuj liczbę ramek iframe na stronie internetowej w oknie konsoli eclipse.
Wydrukuj kod źródłowy ramki na konsoli eclipse po przełączeniu na klatkę.
Objaśnienie kodu:
- Inicjalizujemy obiekt sterownika gecko przy użyciu metody System.setProperty, aby wskazać ścieżkę do pliku geckodriver.exe na komputerze lokalnym.
- Następnie tworzymy wystąpienie obiektu sterownika FireFox za pośrednictwem interfejsu WebDriver.
- Korzystając z obiektu sterownika firefox, otwierana jest następująca strona internetowa: https://www.softwaretestinghelp.com.
- W kolejnym kroku identyfikujemy liczbę elementów iframe wyświetlanych na stronie internetowej, liczymy je i wyświetlamy liczbę elementów iframe w konsoli eclipse.
- Korzystając z id ramki, przełączamy się na ramkę na stronie internetowej. W powyższym przypadku id ramki to „aswift_0”.
- Po pomyślnym przełączeniu na klatkę drukujemy kod źródłowy ramki na konsoli zaćmienia.
- Następnie wracamy do nadrzędnej strony internetowej za pomocą instrukcji driver.switchTo (). DefaultContent () i ostatecznie zamykamy instancję sterownika sieciowego za pomocą metody driver.quit.
Różnica między ramką a ramką iFrame w selenie
- Ramka służy do dzielenia strony na wiele sekcji, z nową zawartością w każdej sekcji.
- Element iFrame służy do osadzania zawartości zewnętrznych witryn internetowych na stronie internetowej w celu uniknięcia problemów z cross-site scripting.
- Uważa się, że element iFrame jest mniej bezpieczny niż ramka, ponieważ iFrame umożliwia programistom osadzanie treści z witryn internetowych osób trzecich. Dlatego element iframe wymaga od programisty zaufania do treści, którą osadził w elemencie iframe.
- Większość tworzonych obecnie aplikacji internetowych nie wykorzystuje ramek do podziału strony, a raczej używają ramek iframe do osadzania treści zewnętrznych, takich jak reklamy, na stronie internetowej.
Obsługa ramek dynamicznych w Selenium
- Na niektórych stronach internetowych właściwości ramki, takie jak identyfikator i nazwa ramki, mogą zmieniać się dynamicznie na stronie internetowej, jednak pozycja ramki pozostanie taka sama. W takim przypadku nie możemy polegać na identyfikatorze lub nazwie ramki, aby jednoznacznie zidentyfikować ramkę.
- Możemy użyć indeks ramek w takim przypadku, aby jednoznacznie zidentyfikować ramkę na podstawie jej położenia.
- W niektórych przypadkach wartość id ramki zmienia się za każdym razem, gdy strona jest ładowana, ale ze statycznym tekstem, który się nie zmienia. Na przykład , rozważ poniższy kod dla ramek iframe.
W powyższym przykładzie tekst „ramka_” pozostaje niezmienny, podczas gdy wartość liczbowa zmienia się przy każdym załadowaniu strony.
- Powyższą ramkę możemy jednoznacznie zidentyfikować za pomocą poniższego XPath
// iframe (zawiera (@ id, „ramka”))
AKTUALIZACJA w marcu 2020 r
Jak zlokalizować elementy wewnątrz ramy
W Selenium, aby uzyskać dostęp do elementów znajdujących się wewnątrz ramki, najpierw musimy przełączyć się wewnątrz ramki, a następnie zidentyfikować elementy, tak jak zwykle robimy to przy użyciu różnych lokalizatorów Selenium. Twój kod Selenium nie może zlokalizować elementów bez przełączania się na ramkę iFrame.
Poniższy zrzut ekranu pokazuje, jak ramki są osadzane w kodzie HTML:
Różne sposoby przełączania się na ramkę iFrame przy użyciu selenu
# 1) Używając nazwy lub identyfikatora ramki
Przełącz się na ramkę iFrame, używając nazwy ramki lub identyfikatora ramki, czasami w kodzie będzie obecna nazwa ramki lub identyfikator lub oba te elementy.
Składnia:
driver.switchTo().frame(1); // for id driver.switchTo().frame('main'); // for name
# 2) Korzystanie z indeksu ramek
Zlokalizuj ramkę, korzystając z indeksu ramki, jeśli jest dostępny.
Składnia:
driver.switchTo().frame(0); // frame index starts with 0
# 3) Korzystanie z elementu sieci Web
Zlokalizuj ramkę za pomocą lokalizatorów Selenium .
Składnia:
driver.switchTo().frame('Locate the frame using xpath or by any other locator');
Inne operacje wykorzystujące Frame
# 1) Powrót do ramki nadrzędnej lub przodka
Przełączam się z powrotem z klatki 3 do klatki 2 za pomocą polecenia „switchTo.parentFrame” .
Składnia:
driver.switchTo().parentFrame();
# 2) Przełączanie na inną ramkę
Jeśli chcesz przełączyć się z klatki 3 na klatkę 1 lub ramkę domyślną, użyj polecenia „switchTo.defaultContent”.
Składnia:
driver.switchTo().defaultContent();
W poniższym kodzie lokalizujemy pole tekstowe z nazwą obecne w ramce.
A co, jeśli spróbujemy go zlokalizować bezpośrednio, bez przełączania się w ramkę?
Zobaczmy wynik:
Błąd kodu z powodu „Nie można zlokalizować elementu: {„ metoda ”:” xpath ”,„ selector ”:” // input (@ name = ’name’) ”}
Teraz przełącz się wewnątrz ramki za pomocą elementu Web Element lub powiedz, używając lokalizatora Selenium i znajdź pole tekstowe.
Poniżej podano pełny kod przełączania wewnątrz ramy:
package com.wordpress.pages; import java.util.List; import org.junit.Assert; import org.junit.Test; import org.openqa.selenium.Alert; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; public class Frame { static WebDriver driver; @Test public void Test(){ System.setProperty('webdriver.chrome.driver', 'D:\Srinivas\New folder\exe\chromedriver.exe'); driver = new ChromeDriver(); driver.get('http://www.dwuser.com/education/content/the-magical-iframe-tag-an-introduction/'); //identifying the frame using locator or say using webelement driver.switchTo().frame(driver.findElement(By.xpath('//div(@id='eduFooterWrap')//iframe(1)'))); driver.findElement(By.xpath('//input(@name='name')')).sendKeys('SoftwareTestingHelp.com'); } }
Wynik:
W ten sposób musimy przełączać się między ramkami, aby zlokalizować elementy za pomocą Selenium. Jeśli na Twojej stronie internetowej znajduje się wiele ramek, musisz je wielokrotnie przełączać.
Wniosek
- iFrame to dokument HTML osadzony w innym dokumencie HTML. Ramki iFrame są wyraźnie wymienione w dokumencie HTML za pomocą znacznika HTML
- metoda switchTo.frame (int frameNumber) umożliwia użytkownikom przełączanie się do określonej ramki przy użyciu identyfikatora ramki.
- switchTo.frame (string frameName) umożliwia użytkownikom przełączanie się do określonej ramki przy użyciu nazwy ramki zdefiniowanej przez programistę.
- switchTo.frame (WebElement frameElement) umożliwia użytkownikom przełączanie się na ramkę na podstawie lokalizacji elementu sieci Web.
=> Sprawdź WSZYSTKIE samouczki dotyczące Selenium tutaj.
rekomendowane lektury
- Cucumber Selenium Tutorial: Cucumber Java Selenium Integracja WebDriver
- Wprowadzenie do Selenium WebDriver - samouczek Selenium # 8
- Wdrożenie naszego pierwszego skryptu WebDriver - Selenium WebDriver Tutorial # 10
- Często zadawane pytania dotyczące selenu
- Jak radzić sobie z alertami / wyskakującymi okienkami w Selenium WebDriver - Samouczek Selenium nr 16
- Obsługa tabel internetowych, ramek i elementów dynamicznych w skrypcie Selenium - samouczek Selenium nr 18
- Niejawne i jawne oczekiwanie w Selenium WebDriver (typy czeków Selenium)
- Przewodnik po generowaniu raportów rozszerzonych w Selenium WebDriver