No such element error: No element found using locator: By(css selector, button.src-component-launcher-WidgetLauncher-wrapper.u-is

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 页面内使用，父页面 angular 也 无法控制 iframe 内的内容。此外，父页面加载完成 而不是 意味着 iframe 已加载。更新了代码以将这些考虑在内。应该可以正常工作。

希望对您有所帮助。

Answer 2

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

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

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

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

现在您可以使用

将焦点更改到原始页面

browser.switchTo().defaultContent()

No such element error: No element found using locator: By(css selector, button.src-component-launcher-WidgetLauncher-wrapper.u-is

No such element error: No element found using locator: By(css selector, button.src-component-launcher-WidgetLauncher-wrapper.u-is

iframe

cucumber

protractor