WebdriverIO 无法单击(离子)选项卡
WebdriverIO can't click on (Ionic) tab
我正在使用 WebdriverIO 测试 Ionic (+ Angular) 应用程序的一些基本功能。框架设置工作正常,但我找不到在某些 HTML 元素上 click
的方法。例如,这是一些 HTML 样本:
<div class="tabbar show-tabbar" role="tablist" style="top: 166px; display: flex;">
<a class="tab-button has-title has-title-only" href="#" role="tab" id="tab-t0-0" aria-controls="tabpanel-t0-0"
aria-selected="true">
<span class="tab-button-text">Blah</span>
<div class="button-effect"></div>
</a>
<a class="tab-button has-title has-title-only" href="#" role="tab" id="tab-t0-1" aria-controls="tabpanel-t0-1"
aria-selected="false">
<span class="tab-button-text">Foo</span>
<div class="button-effect"
style="transform: translate3d(83px, -103px, 0px) scale(1); height: 240px; width: 240px; opacity: 0; transition: transform 395ms ease 0s, opacity 277ms ease 118ms;"></div>
</a>
<a class="tab-button has-title has-title-only" href="#" role="tab" id="tab-t0-2" aria-controls="tabpanel-t0-2"
aria-selected="false">
<span class="tab-button-text">Bar</span>
<div class="button-effect"
style="transform: translate3d(3px, -99px, 0px) scale(1); height: 240px; width: 240px; opacity: 0; transition: transform 395ms ease 0s, opacity 277ms ease 118ms;"></div>
</a>
<div class="tab-highlight animate" style="transform: translate3d(570px, 0px, 0px) scaleX(285);"></div>
</div>
这是我用来测试功能的超级简单的测试用例:
import { expect } from "chai";
describe("Some Test", () => {
const logingUrl: string = "url0";
const appUrl: string = "url1";
it("Some Test Again", () => {
browser.url(logingUrl);
browser.url(appUrl);
const tab = $("#tab-t0-2");
tab.click();
expect(tab.getAttribute("aria-selected")).to.equal("true");
});
});
..但每次我 运行 它时,我都会收到一些奇怪的错误消息,指出该元素在某些时候不可点击。有什么线索吗?
[0-0] element click intercepted in "Some Test Again"
element click intercepted: Element <a class="tab-button has-title has-title-only" href="#" role="tab" id="tab-t0-2" aria-controls="tabpanel-t0-2" aria-selected="false">...</a> is not clickable at point (666, 170). Other element would receive the click: <ion-backdrop disable-activated="" role="presentation" tappable="" class="backdrop-no-tappable" style="opacity: 0.5;"></ion-backdrop>
(Session info: headless chrome=75.0.3770.100)
这是经典的 Angular/Ionic 背景问题之一。
让我们从错误消息开始:元素 #tab-t0-2
在点(坐标)不可点击,另一个元素将收到点击:ion-backdrop
。
这告诉我们无法点击您的目标元素,因为 ion-backdrop
标记呈现在它上面。 ion-backdrop组件是一个短动画(通常用于modals),在本例中,背景的半暗(opacity: 0.5
)。
✖ 解法一: 简单的反击方法?明确期望它消失,然后单击目标元素。
it("Some Test Again", () => {
browser.url(logingUrl);
browser.url(appUrl);
// Explicitly wait for the backdrop animation to disappear:
const backdrop = $('.backdrop-no-tappable');
backdrop.waitForExist(5000, true, 'Backdrop still present');
const tab = $("#tab-t0-2");
tab.click();
expect(tab.getAttribute("aria-selected")).to.equal("true");
});
✖ 解决方案 2: 您可以尝试的另一件事是 仅 单击 tab
元素,一旦它完全在DOM中可见且难以处理(这是一种best-practice):
const tab = $("#tab-t0-2");
tab.waitForDisplayed(5000);
// For 'wdio-v4' users:
// tab.waitForVisible(5000);
tab.click();
expect(tab.getAttribute("aria-selected")).to.equal("true");
我正在使用 WebdriverIO 测试 Ionic (+ Angular) 应用程序的一些基本功能。框架设置工作正常,但我找不到在某些 HTML 元素上 click
的方法。例如,这是一些 HTML 样本:
<div class="tabbar show-tabbar" role="tablist" style="top: 166px; display: flex;">
<a class="tab-button has-title has-title-only" href="#" role="tab" id="tab-t0-0" aria-controls="tabpanel-t0-0"
aria-selected="true">
<span class="tab-button-text">Blah</span>
<div class="button-effect"></div>
</a>
<a class="tab-button has-title has-title-only" href="#" role="tab" id="tab-t0-1" aria-controls="tabpanel-t0-1"
aria-selected="false">
<span class="tab-button-text">Foo</span>
<div class="button-effect"
style="transform: translate3d(83px, -103px, 0px) scale(1); height: 240px; width: 240px; opacity: 0; transition: transform 395ms ease 0s, opacity 277ms ease 118ms;"></div>
</a>
<a class="tab-button has-title has-title-only" href="#" role="tab" id="tab-t0-2" aria-controls="tabpanel-t0-2"
aria-selected="false">
<span class="tab-button-text">Bar</span>
<div class="button-effect"
style="transform: translate3d(3px, -99px, 0px) scale(1); height: 240px; width: 240px; opacity: 0; transition: transform 395ms ease 0s, opacity 277ms ease 118ms;"></div>
</a>
<div class="tab-highlight animate" style="transform: translate3d(570px, 0px, 0px) scaleX(285);"></div>
</div>
这是我用来测试功能的超级简单的测试用例:
import { expect } from "chai";
describe("Some Test", () => {
const logingUrl: string = "url0";
const appUrl: string = "url1";
it("Some Test Again", () => {
browser.url(logingUrl);
browser.url(appUrl);
const tab = $("#tab-t0-2");
tab.click();
expect(tab.getAttribute("aria-selected")).to.equal("true");
});
});
..但每次我 运行 它时,我都会收到一些奇怪的错误消息,指出该元素在某些时候不可点击。有什么线索吗?
[0-0] element click intercepted in "Some Test Again"
element click intercepted: Element <a class="tab-button has-title has-title-only" href="#" role="tab" id="tab-t0-2" aria-controls="tabpanel-t0-2" aria-selected="false">...</a> is not clickable at point (666, 170). Other element would receive the click: <ion-backdrop disable-activated="" role="presentation" tappable="" class="backdrop-no-tappable" style="opacity: 0.5;"></ion-backdrop>
(Session info: headless chrome=75.0.3770.100)
这是经典的 Angular/Ionic 背景问题之一。
让我们从错误消息开始:元素 #tab-t0-2
在点(坐标)不可点击,另一个元素将收到点击:ion-backdrop
。
这告诉我们无法点击您的目标元素,因为 ion-backdrop
标记呈现在它上面。 ion-backdrop组件是一个短动画(通常用于modals),在本例中,背景的半暗(opacity: 0.5
)。
✖ 解法一: 简单的反击方法?明确期望它消失,然后单击目标元素。
it("Some Test Again", () => {
browser.url(logingUrl);
browser.url(appUrl);
// Explicitly wait for the backdrop animation to disappear:
const backdrop = $('.backdrop-no-tappable');
backdrop.waitForExist(5000, true, 'Backdrop still present');
const tab = $("#tab-t0-2");
tab.click();
expect(tab.getAttribute("aria-selected")).to.equal("true");
});
✖ 解决方案 2: 您可以尝试的另一件事是 仅 单击 tab
元素,一旦它完全在DOM中可见且难以处理(这是一种best-practice):
const tab = $("#tab-t0-2");
tab.waitForDisplayed(5000);
// For 'wdio-v4' users:
// tab.waitForVisible(5000);
tab.click();
expect(tab.getAttribute("aria-selected")).to.equal("true");