Ionic 如何使用cypress单击日历元素？

qaxu7uf2 于 2022-12-09 发布在 Ionic

关注(0)|答案(3)|浏览(154)

我正在写一个e2e测试，它试图点击页面上的日历元素。当我打开日历时，Cypress实际上是在点击一个数字，但它之后不会点击Done按钮。
下面是检查的元素：

以下是日期选取器：

代码如下：

<div style="text-align: center;">
        <ion-datetime presentation="date" *ngIf="showPicker" display-format="MM/DD/YYYY" min="1900-01-01"
          placeholder="*Enter your date of birth" formControlName="dateOfBirth" (ionChange)="dateChanged($event)"
          showDefaultButtons="true" (ionCancel)="showPicker = false;">
        </ion-datetime>
      </div>

我已经尝试在屏幕截图中显示的确认按钮上使用默认ID。
这不起作用：如果您想在一个页面上找到一个新的按钮，请点击这里。如果您有任何问题，请点击这里。
如有任何帮助，我们将不胜感激。

ionic-framework

来源：https://stackoverflow.com/questions/72891878/how-to-click-a-calendar-element-using-cypress

3条答案

按热度按时间

y3bcpkx11#

您在该页面上有一些带有shadow DOM的元素，为了避免出现问题，请尝试在测试中添加设置includeShadowDom: true。
这样，您的两个命令都可以工作

it('tests the calendar', {includeShadowDom: true}, () => {

  cy.get('ion-datetime').find('#confirm-button').click();   // passes
    
  cy.get('#confirm-button').click();                        // passes
})

也可以在cypress.config.js中全局设置

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    
  },
  includeShadowDom: true
});

赞(0）回复(0）举报 2022-12-09

vwkv1x7d2#

如果您有其他需要遍历Shadow DOM的元素，那么在cypress配置文件中写入includeShadowDom: true是一个很好的做法。
然后您可以直接使用命令：

cy.get('#confirm-button').click()

赞(0）回复(0）举报 2022-12-09

icnyk63a3#

Done按钮在DOM中带有一个id。最好在测试中使用该标识符，因为id在发布期间应该永远不会更改。使用第二个示例（目标是id），您需要更正语法。
应该是
cy.get('[id="confirm-button"]').click();
如果仍然不起作用，请尝试包含标记类型：
cy.get('ion-button[id="confirm-button"]').click();

赞(0）回复(0）举报 2022-12-09

我来回答

Ionic 如何使用cypress单击日历元素？

3条答案

相关问题

热门标签

最新问答