如何使用 Selenium Webdriver 和 Java 在框架内单击 iframe 内的链接答案

【问题标题】：How to click on a link inside an iframe which is inside a frame using Selenium Webdriver and Java如何使用 Selenium Webdriver 和 Java 在框架内单击 iframe 内的链接
【发布时间】：2020-06-17 14:03:06
【问题描述】：

我一直在尝试使用 cucumber 和 selenium 自动执行一些手动检查，并尝试在 iframe 内的菜单项上进行点击事件。下面是源码的骨架。

<html>
<head>...</head>
<frameset rows="100%,*" border="0">
    <frame src="/XXXX/index.dsp" cd_frame_id_="03af6e390xxxxxxxxx0b209e24f67b9fab">
        <html>
            <body>  
                <iframe class="menuframe" name="menu" src="menu.dsp" scrolling="yes" seamless="seamless">
                    <html>
                    <head>..</head>
                    <body class="menu"...........>
                        <table class="menuTable".............>
                            <tbody>                                         
                                <tr>......</tr>
                                <tr>......</tr>
                                <tr>......</tr>

                                <tr manualhide="true" onclick="toggle(this, 'XXX_subMenu', 'XXXX_twistie');" onmouseover="this.className='cursor';" class="cursor">
                                    <td class="menusection menusection-collapsed" id="elmt_XXXX_subMenu">
                                        <img id="XXXX_twistie" src="/XXXX/images/collapsed_blue.png">
                                          &nbsp;XXXX  
                                    </td>
                                </tr>
                                <tr>......</tr>
                                <tr>......</tr>
                            </tbody>
                    </body>
                </iframe>

                <iframe class="contentframe" name="body" id="body" src="stats-general.dsp">
                .............
                </iframe>

            </body>
        </html>
    </frame>
</frameset>

我正在尝试点击上面的 ID 为 elmt_XXXX_subMenu。

正如我在一些博客中所读到的，它需要切换到框架。我尝试了以下方法。

driver.switchTo().defaultContent();
// switch to frame
driver.switchTo().frame(0); 

// switch to menu iframe, It throws an exception
driver.switchTo().frame("menu"); 

// When replaced by following line also it throws same exception
// driver.switchTo().frame(driver.findElement(By.name("menu")));

下面是堆栈跟踪。

 org.openqa.selenium.JavascriptException: javascript error: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
  (Session info: chrome=83.0.4103.97)
Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:17:03'
System info: host: 'XXXX', ip: 'XX.XX.XXX.XXX', os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0', java.version: '1.8.0_221'
Driver info: org.openqa.selenium.chrome.ChromeDriver
Capabilities {acceptInsecureCerts: false, browserName: chrome, browserVersion: 83.0.4103.97, chrome: {chromedriverVersion: 83.0.4103.39 (ccbf011cb2d2b..., userDataDir: C:\Users\XXXXXX~1\AppData\L...}, goog:chromeOptions: {debuggerAddress: localhost:58320}, javascriptEnabled: true, networkConnectionEnabled: false, pageLoadStrategy: normal, platform: WINDOWS, platformName: WINDOWS, proxy: Proxy(), setWindowRect: true, strictFileInteractability: false, timeouts: {implicit: 0, pageLoad: 300000, script: 30000}, unhandledPromptBehavior: dismiss and notify, webauthn:virtualAuthenticators: true}
Session ID: f2e850e3e43d7782902297879bc70bc4
    at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
    at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
    at java.lang.reflect.Constructor.newInstance(Constructor.java:423)
    at org.openqa.selenium.remote.http.W3CHttpResponseCodec.createException(W3CHttpResponseCodec.java:187)
    at org.openqa.selenium.remote.http.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:122)
    at org.openqa.selenium.remote.http.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:49)
    at org.openqa.selenium.remote.HttpCommandExecutor.execute(HttpCommandExecutor.java:158)
    at org.openqa.selenium.remote.service.DriverCommandExecutor.execute(DriverCommandExecutor.java:83)
    at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:552)
    at org.openqa.selenium.remote.RemoteWebDriver$RemoteTargetLocator.frame(RemoteWebDriver.java:892)
    at XXX.XXXX.XXXX.pages.TestPage.test(TestPage.java:40)
    at XXX.XXXX.XXXX.stepdefinitions.TestSteps.test_method(TestSteps.java:137)
    at ?.Then Check menu(basicChecks.feature:12)

如果这不是正确的方法，请提出建议？非常感谢。

更新： 根据@DebanjanB 的回答，尝试使用建议的 sn-p（css 选择器和 xpath），

new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.cssSelector("frame[src*='index']")));
new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.cssSelector("iframe.menuframe[name='menu']")));
new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.cssSelector("td.menusection.menusection-collapsed#elmt_XXXX_subMenu"))).click();

在第 2 行抛出同样的异常

org.openqa.selenium.JavascriptException: javascript error: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
  (Session info: chrome=83.0.4103.97)
Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:17:03'
System info: host: 'XXXX', ip: 'XX.XX.XXX.XXX', os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0', java.version: '1.8.0_221'
Driver info: org.openqa.selenium.chrome.ChromeDriver
Capabilities {acceptInsecureCerts: false, browserName: chrome, browserVersion: 83.0.4103.97, chrome: {chromedriverVersion: 83.0.4103.39 (ccbf011cb2d2b..., userDataDir: C:\Users\XXXXXX~1\AppData\L...}, goog:chromeOptions: {debuggerAddress: localhost:58320}, javascriptEnabled: true, networkConnectionEnabled: false, pageLoadStrategy: normal, platform: WINDOWS, platformName: WINDOWS, proxy: Proxy(), setWindowRect: true, strictFileInteractability: false, timeouts: {implicit: 0, pageLoad: 300000, script: 30000}, unhandledPromptBehavior: dismiss and notify, webauthn:virtualAuthenticators: true}
Session ID: 79f14698ee49ff2f4308b7f7930ee8b1
    at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
    at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
    at java.lang.reflect.Constructor.newInstance(Constructor.java:423)
    at org.openqa.selenium.remote.http.W3CHttpResponseCodec.createException(W3CHttpResponseCodec.java:187)
    at org.openqa.selenium.remote.http.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:122)
    at org.openqa.selenium.remote.http.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:49)
    at org.openqa.selenium.remote.HttpCommandExecutor.execute(HttpCommandExecutor.java:158)
    at org.openqa.selenium.remote.service.DriverCommandExecutor.execute(DriverCommandExecutor.java:83)
    at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:552)
    at org.openqa.selenium.remote.RemoteWebDriver$RemoteTargetLocator.frame(RemoteWebDriver.java:892)
    at org.openqa.selenium.support.ui.ExpectedConditions$17.apply(ExpectedConditions.java:501)
    at org.openqa.selenium.support.ui.ExpectedConditions$17.apply(ExpectedConditions.java:497)
    at org.openqa.selenium.support.ui.FluentWait.until(FluentWait.java:249)
    at XXX.XXXX.XXXX.pages.TestPage.test(TestPage.java:26)
    at XXX.XXXX.XXXX.stepdefinitions.TestSteps.test_method(TestSteps.java:137)
    at ?.Then Check menu(basicChecks.feature:12)

【问题讨论】：

第二个</iframe> 结束标签从未在<body> 内开始。交叉检查 HTML。

标签： java selenium selenium-webdriver iframe webdriverwait

【解决方案1】：

到<iframe> 内的元素上的click() <frame> 所以你必须：

为第一个 frameToBeAvailableAndSwitchToIt 引入 WebDriverWait。
为第二个 frameToBeAvailableAndSwitchToIt 引入 WebDriverWait。
为所需的 elementToBeClickable 诱导 WebDriverWait。

您可以使用以下任一Locator Strategies：

使用cssSelector：

new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.cssSelector("frame[src*='index']")));
new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.cssSelector("iframe.menuframe[name='menu']")));
new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.cssSelector("td.menusection.menusection-collapsed#elmt_XXXX_subMenu"))).click();

使用xpath：

new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.xpath("//frame[contains(@src, 'index')]")));
new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.xpath("//iframe[@class='menuframe' and @name='menu']")));
new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.xpath("//td[@class='menusection menusection-collapsed' and @id='elmt_XXXX_subMenu']"))).click();

注意：根据当前的 HTML，您提供的以下 <iframe> 似乎已关闭，这可能不是真的：

<iframe class="menuframe" name="menu" src="menu.dsp" scrolling="yes" seamless="seamless"></iframe>

参考

您可以在以下位置找到一些相关讨论：

【讨论】：

非常感谢您的详细回答。抱歉，在问题中编写 html 骨架时出错。我刚刚更新了它。使用 css 选择器和 xpath，我在第二行（问题中的堆栈跟踪）中得到了相同的异常。 new WebDriverWait(驱动程序，10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.cssSelector("iframe.menuframe[name='menu']")));日志：org.openqa.selenium.JavascriptException：javascript 错误：无法在“窗口”上执行“getComputedStyle”：参数 1 不是“元素”类型。
@NagarajaJB 您能否使用基于文本的实际 HTML 来更新问题，而不是手工制作的 HTML？
我能够再次使用索引来切换到 iframe 使其工作。非常感谢您的回答。

【解决方案2】：

.frame() 用于将元素切换为iframe 并且它以一个元素作为其参数，因此您需要将元素传递到那里。此外，带有“0”的元素不是 iframe 类型，因此您不需要 driver.switchTo().frame(0) 代码行。

您只需将驱动程序切换到menu iframe，然后单击该元素。

要切换到您需要使用的menu iframe：

driver.switchTo().frame(driver.findElement(By.name("menu")));

【讨论】：

非常感谢您的回答。如果我尝试直接切换到 iframe，我会低于 org.openqa.selenium.NoSuchElementException。我也尝试添加 WebDriverWait。引起：org.openqa.selenium.NoSuchElementException：没有这样的元素：无法找到元素：{“method”：“css selector”，“selector”：“* [name ='menu']”}如果我切换到框架并尝试，然后是问题中的异常。

【解决方案3】：

我能够通过按索引切换内容来使其正常工作。使用System.out.println(driver.getPageSource()); 将页面源记录到控制台并确保我在正确的位置工作。我尝试按标签查找 iframe 并将其名称打印如下。

List<WebElement> elements = DriverContext.driver.findElements(By.tagName("iframe"));
elements.forEach(element -> System.out.println(element.getAttribute("name"))); // printed 'menu' and 'body', perfect

但是，在使用名称将内容切换到 iframe 时，也尝试使用 WebDriverWait，

driver.switchTo().frame(driver.findElement(By.name("menu")));

无论出于何种原因，它都没有工作，并像问题中一样不断抛出异常。

使用 index 切换到 iframe，然后单击起作用的元素。

driver.switchTo().frame(0); // switch to frame
driver.switchTo().frame(0); // switch to first iframe

driver.findElement(By.id("elmt_XXXX_subMenu")).click();

另外，我使用 WebDriverWait 来等待页面加载。

WebDriverWait wait = new WebDriverWait(driver, 30);
wait.until(webDriver -> ((JavascriptExecutor) driver).executeScript("return document.readyState").toString().equals("complete"));

【讨论】：