Создание пользовательской команды Cypress для получения текста в машинописи - PullRequest
2 голосов
/ 31 октября 2019

Я работаю над проектом 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() ничего не происходит, этопросто сидеть и не возвращать текст.

Может кто-нибудь помочь мне решить эту проблему.

1 Ответ

3 голосов
/ 01 ноября 2019
Команда

cy является асинхронной, поэтому вы должны получить доступ к ее результату в блоке затем . Технически вы можете вернуть строку из пользовательской команды 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))
...