如何单击 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 留空字符串，它将返回堆栈中的上一页（第二个示例）。

 <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>