如何解决如何单击 Codeceptjs 中的 Ionic 后退按钮?
我正在尝试使用 CodeceptJS 单击在 Ionic 中生成的后退按钮,无论我尝试什么,我都无法让它工作。我认为可能与#shadow-root
有关。
首先,这是由 Ionic 生成的 HTML:
<ion-header role="banner" class="md header-md header-collapse-none hydrated">
<ion-toolbar class="toolbar-title-default md in-toolbar hydrated">
<ion-buttons slot="start" class="buttons-first-slot sc-ion-buttons-md-h sc-ion-buttons-md-s md hydrated">
<ion-back-button class="md button back-button-has-icon-only in-toolbar ion-activatable ion-focusable hydrated">
#shadow-root: <button type="button" class="button-native" part="native" aria-label="back"><span class="button-inner"><ion-icon part="icon" aria-hidden="true" role="img" class="md hydrated"></ion-icon></span><ion-ripple-effect role="presentation" class="md unbounded hydrated"></ion-ripple-effect></button>
</ion-back-button>
</ion-buttons>
<ion-title class="md title-default hydrated">Page title</ion-title>
</ion-toolbar>
</ion-header>
在 CodeceptJS 中,在我的 helper.js
中,我尝试了以下操作:
async clickIonBackButton() {
const { Playwright } = this.helpers;
const backButton = await locate('ion-toolbar').find('ion-back-button').find('button');
Playwright.click(backButton);
}
我也尝试过简单地点击 ion-back-button
,但不幸的是这不起作用。似乎我需要点击 <button>
中的 <ion-back-button>
,但我不知道该怎么做。
解决方法
抱歉,我误解了你的问题,即使你的问题是正确的(你需要 href 属性来使按钮工作,因为它是一个具有底层机制的 Ionic 组件),我阅读了 CodeceptJS 文档并发现,你赢了无法通过剧作家检测到 Shadow Dom。您必须使用 webDriver 作为本页中的解释: https://codecept.io/shadow/#locating-shadow-dom-elements
有关 ionic 中 shadow Dom 的更多信息: https://ionicframework.com/docs/theming/css-shadow-parts
有关 ion-back-button 中阴影部分的更多信息: https://ionicframework.com/docs/api/back-button#css-shadow-parts
,离子返回按钮不会点击,除非您提供 href 属性(下面的第一个示例)。 如果您不知道需要返回哪个页面,只需将 href 留空字符串,它将返回堆栈中的上一页(第二个示例)。
1.
<ion-buttons slot="start">
<ion-back-button defaultHref="home"></ion-back-button>
</ion-buttons>
<ion-buttons slot="start">
<ion-back-button defaultHref=""></ion-back-button>
</ion-buttons>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。