Доступ к свойству Angular элемента DOM из Cypress - PullRequest
Новая
       24

Доступ к свойству Angular элемента DOM из Cypress

1 голос
/ 10 апреля 2019

У меня есть приложение Angular, в котором у меня есть такой контейнер: 

<div id="my-container" [data-version]="version$ | async">

Я добавил свойство data-version специально для моих тестов Cypress, поэтому я буду знать некоторые нюансы того, что мне нужно.test to do.

Однако мне трудно найти правильное заклинание для доступа к этому значению.Вот что я попробовал:

Во-первых, давайте назовем приведенную выше строку: A, а эту версию - без скобок B: 

<div id="my-container" data-version="version$ | async">

Тогда у меня есть 3 варианта CypressЯ пробовал: 

cy.get('#my-container')
  .its('data-version') // Flavor 1
  .then((version) => {
    console.log(version);
  }

cy.get('#my-container')
  .should('have.attr', 'data-version') // Flavor 2
  .then((version) => {
    console.log(version);
  }

cy.get('#my-container')
  .invoke('attr', 'data-version') // Flavor 3
  .then((version) => {
    console.log(version);
  }

Результаты:

  • 1A: кипарисовые балки
  • 2A: кипарисовые балки
  • 3A: кипарисовые балки
  • 1B: Cypress не находит атрибут
  • 2B: Cypress находит буквальную 'версию $ |async '
  • 2C: Cypress находит буквальную' версию $ |async '

Вопрос: есть ли способ получить свойство Angular из Cypress?

1 Ответ

1 голос
/ 10 апреля 2019

Flavor B не допускается, выражение не будет оцениваться, и вы просто привязываете строку.

Вы должны использовать следующий синтаксис: 

[attr.data-version]="version$ | async"

Это задокументировано здесь

...