Cypress: как получить доступ к стороннему компоненту?

Question

В Cypress я обычно обращаюсь к элементам DOM с атрибутами data-test-id. Они жестко запрограммированы в html.

Например:

<div data-test-id="my-div"></div>

затем

cy.get('[data-test-id=my-div]').click();

Но я не могу использовать этот метод, потому что приложение я при работе используются сторонние библиотеки для создания сторонних компонентов. Несколько примеров: ngx-datable, full-calendar ...

Поэтому html не доступен напрямую для создания атрибутов data-test-id. Я не хочу генерировать клик, основываясь на позиции x / y, потому что я не думаю, что это будет надежной альтернативой с различными размерами экрана. Есть ли решение этой проблемы?

Answer 1

Для многих компонентов достаточно просто получить доступ к родительскому элементу, в основном:

<some-component data-cy="foo" />

В более сложном случае, когда вам нужно получить доступ к внутренней структуре, я бы попытался сохранить ее независимой структуры, насколько это возможно. Так что, если вы можете сначала go для тегов классов, то типов компонентов или в худшем случае идентификаторы. Затем используйте data-cy на внешнем компоненте и затем используйте find, чтобы пройти вниз по структуре (я бы рекомендовал использовать find, несмотря ни на что)

Примеры

Если у вас есть компонент формы, который создает ввод и метку, выполните:

<some-form-component label="foo" model="blah" data-cy="foo" />

Если у компонента есть классы ( предпочитается ) form-label и form-input , затем выберите их, используя:

cy.get('[data-cy="foo"]').find('.form-label')
// and
cy.get('[data-cy="foo"]').find('.form-input')

, если компонент ( fallback ) только переносит обычные необработанные типы, но не имеет разумных классов для использования, затем выполните:

cy.get('[data-cy="foo"]').find('label')
// and
cy.get('[data-cy="foo"]').find('input')

и если у вас есть только идентификаторы (, не делайте этого, если у вас нет другого выбора ), тогда выберите по идентификаторам:

cy.get('[data-cy="foo"]').find('#label')
// and
cy.get('[data-cy="foo"]').find('#input')

В В последнем случае с идентификаторами рассмотрите возможность поиска других компонентов, так как рисковать иметь такой же идентификатор на странице html - это плохо.

Когда рендеринг странный Некоторые фреймворки могут показаться непонятными. Одна вещь, которая привлекла мое внимание, это использование нескольких входов для компонента. В этом случае cy.getByLabelText может быть вашим выходом из ответа здесь: { ссылка }