时间戳

首页 > 解决方案 > 创建用于在打字稿中获取文本的 cypress 自定义命令

javascript - 创建用于在打字稿中获取文本的 cypress 自定义命令

问题描述

我正在研究一个柏树项目，我正在尝试创建一个自定义命令来解析承诺并返回传递的定位器上的文本。

export default class QuickRegisterPage {
  emailAddressText() {
    return cy.get('#emailAddress');
  }

public createNewUser() {
    cy.getQuickRegisterUrl().then(url => {
      cy.visit(url);
      text = cy.getText(this.emailAddressText());
      cy.log(text);  
      });
}


Cypress.Commands.add(
  'getText',
  (element: Cypress.Chainable<JQuery<HTMLElement>>) => {
    element.scrollIntoView();
    element.then(ele => {
      const text = ele.text();
      return text;
    });
  }
);

declare namespace Cypress {
  interface Chainable<Subject = any> {
    getText(element: Cypress.Chainable<JQuery<HTMLElement>>): string;
  }
}

当我打电话时cy.getText()什么都没有发生，它只是坐在那里而不返回文本。

有人可以帮我解决这个问题。

标签： javascripttypescriptui-automationcypress

解决方案

cy 命令是异步的，因此您应该在then块中访问其结果。从技术上讲，您可以从 cy 自定义命令返回一个字符串，但由于 api 一致性，不建议这样做。

我会把它写成一个子自定义命令

declare namespace Cypress {
  interface Chainable {
    getText(): Chainable<string>;
  }
}
  Cypress.Commands.add('getText', { prevSubject: 'element' }, 
    ($element: JQuery<HTMLElement>) => {
      cy.wrap($element).scrollIntoView()
      return cy.wrap($element).invoke('text')
    }
  )

它是如何使用的

cy.get('#emailAddress')
      .getText()
      .then(text => console.log('Email Address ', text))

推荐阅读