Question

我已经进入框架，但是当我尝试找到一个元素时，便无法找到元素。

iframe代码的代码如下：

<iframe title="Opens a widget where you can find more information" id="launcher" tabindex="0" class="zEWidget-launcher zEWidget-launcher--active" style="border: none; background: transparent; z-index: 999998; transform: translateZ(0px); position: fixed; transition: opacity 250ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s, top, bottom; opacity: 1; width: 113px; height: 50px; max-height: 551px; min-height: 50px; margin: 10px 20px; right: 0px; bottom: 0px;"></iframe>

按钮的代码如下：

<button class="src-component-launcher-WidgetLauncher-wrapper u-isActionable u-textLeft u-inlineBlock u-borderNone u-textBold u-textNoWrap Arrange Arrange--middle u-userLauncherColor "><span data-testid="Icon" class="src-component-Icon-container u-userColor src-component-launcher-WidgetLauncher-icon src-styles-components-Icon-Icon Arrange-sizeFit u-textInheritColor u-inlineBlock  Icon" type="Icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20"><path d="M11,12.3V13c0,0-1.8,0-2,0v-0.6c0-0.6,0.1-1.4,0.8-2.1c0.7-0.7,1.6-1.2,1.6-2.1c0-0.9-0.7-1.4-1.4-1.4 c-1.3,0-1.4,1.4-1.5,1.7H6.6C6.6,7.1,7.2,5,10,5c2.4,0,3.4,1.6,3.4,3C13.4,10.4,11,10.8,11,12.3z"></path><circle cx="10" cy="15" r="1"></circle><path d="M10,2c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S5.6,2,10,2 M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0 L10,0z"></path></svg></span><span class="src-component-launcher-WidgetLauncher-label Arrange-sizeFit u-textInheritColor u-inlineBlock " data-testid="launcherLabel">Help</span></button>

我尝试使用以下代码找到按钮：

element(by.css('button.src-component-launcher-WidgetLauncher-wrapper.u-isActionable.u-textLeft.u-inlineBlock.u-borderNone.u-textBold.u-textNoWrap.Arrange.Arrange--middle.u-userLauncherColor'));

但它不起作用。

Answer 1

可能您缺少首先切换到iframe的代码，或者选择器不是唯一的，并且选择器进入了错误的iframe。建议您获取文本，然后console.log看到它确实是正确的iframe。

也就是说，以下代码可以正常工作。它基本上使用了与您相同的定位器，但是在转移了焦点之后。

browser.waitForAngularEnabled(false);
browser.sleep(5000);

browser.switchTo().frame(element(by.tagName('iframe#launcher')).getWebElement());
element(by.css('button.src-component-launcher-WidgetLauncher-wrapper.u-isActionable.u-textLeft.u-inlineBlock.u-borderNone.u-textBold.u-textNoWrap.Arrange.Arrange--middle.u-userLauncherColor'))
                    .getText().then((text) => {
                        console.log(text);
});

参考：http://www.protractortest.org/#/api?view=webdriver.WebDriver.prototype.switchTo

更新：一般而言，iframe很难使用。即使在有角页面中使用它们，父页面angular仍无法控制iframe中的内容。此外，父页面加载完成并不不表示已加载iframe。更新了代码以将这些考虑在内。应该就可以了。

希望有帮助。

Answer 2

在访问内部的任何元素之前，您需要先切换到iframe。

browser.switchTo().frame($("#launcher").getWebElement())

以上代码会将焦点切换到iframe窗口。现在，您可以使用by.buttonText()或by.partialButtonText()定位器找到该按钮。

element(by.partialButtonText("Help")).click()

现在您可以使用来将焦点更改为原始页面

browser.switchTo().defaultContent()

没有这样的元素错误：使用定位器找不到元素：By（css选择器，button.src-component-launcher-WidgetLauncher-wrapper.u-is

2 个答案: