Как написать файл определения шага элемента схемы сценария в Cypress

#javascript #css-selectors #cucumber #cypress #gherkin

#javascript #css-селекторы #огурец #cypress #корнишон

Вопрос:

Я использую файл функции ниже:

 Scenario Outline: Admin can send invitations to any user roles 
    And Click on drop-down to select role <Role>

    Examples:
    |Role|
    |Admin|
    |Manager|
  

Я пытаюсь написать файл определения шага здесь, но ни один из них не сработал

# 1: Передача в качестве параметров … не работает

 And('Click on drop-down to select role "([^"]*)"', (role) => {
    cy.get('.add-person__inputs--container > :nth-child(2) > .ui').contains(role).click()
  

введите описание изображения здесь

# 2: Передача в виде строковых значений …. не работает

 And('Click on drop-down to select role {string}', (role_value) => {
cy.get(`.add-person__inputs--container > :nth-child(2) > .ui[value='${role_value}']`).click()
  

введите описание изображения здесь

Результат Cypress # 1 и # 2:

введите описание изображения здесь

# 3: также пробовал это и, похоже, у него получилось лучше, потому что просто это выдало мне другую ошибку, ЛОЛ

 And('Click on drop-down to select role {string}', (role_value) => {
cy.get('.add-person__inputs--container > :nth-child(2) > .ui').find(role_value).click()
  

Результат Cypress для # 3:
введите описание изображения здесь

HTML для страницы, которую я тестирую, я пытаюсь получить эти выделенные значения из выпадающих элементов, но перед каждым элементом нет идентификатора или имени

И я получил cy.get('.add-person__inputs--container > :nth-child(2) > .ui') от Cypress selector

введите описание изображения здесь

HTML-теги

 <div class="add-person__inputs--container" style="" xpath="1"><div class="field "><span class="login-form__inputs-container--title">Email</span><div class="ui large input login-form__inputs-container--input"><input name="email" placeholder="Add email address" autocomplete="new-password" type="email" value=""></div></div><div class="add-person__description--container"><span class="login-form__inputs-container--title">Role</span><div name="role" role="listbox" aria-disabled="false" aria-expanded="true" class="ui active visible fluid selection dropdown add-person__dropdown" tabindex="0"><div class="text" role="alert" aria-live="polite">Viewer</div><i aria-hidden="true" class="chevron down icon"></i><div class="visible menu transition"><div role="option" aria-checked="true" aria-selected="true" class="active selected item" style="pointer-events: all;">Viewer</div><div role="option" aria-checked="false" aria-selected="false" class="item" style="pointer-events: all;">Grower</div><div role="option" aria-checked="false" aria-selected="false" class="item" style="pointer-events: all;">Manager</div><div role="option" aria-checked="false" aria-selected="false" class="item" style="pointer-events: all;">Admin</div></div></div></div>
  

пожалуйста, имейте в виду, что я очень новичок в кодировании, но я думаю, что проблема либо в файле определения шага, либо в селекторе css … 🙁

Заранее спасибо: D

Ответ №1:

Он выглядит в вызове шага с пропущенными кавычками, попробуйте как удар:

    And Click on drop-down to select role "<Role>"
  

Комментарии:

1. Привет, спасибо за ответ, но я пробовал sting и parameter …. но я думаю, что проблема либо в файле определения шага, либо в селекторе CSS….. Я обновил более подробную информацию, пожалуйста, взгляните еще раз, когда у вас будет время 🙂

Ответ №2:

В примере: измените его на string. Это сработало для меня:

Схема сценария: Администратор может отправлять приглашения любым ролям пользователей и нажимать на выпадающий список, чтобы выбрать роль.

 Examples:
|Role|
|"Admin"|
|"Manager"|
  

и

 ('Click on drop-down to select role {string}', (role_value) => {
cy.get(`.add-person__inputs--container > :nth-child(2) > .ui[value='${role_value}']`).click()
  

Ответ №3:

Итак, это то, что сработало для меня:

В файле объекта:

 And Click on drop-down to select role "<Role>"
  

В файле определения шага:

 And(/^Click on drop-down to select role "(.*?)"$/, (role) => {
    cy.get('.add-person__inputs--container > :nth-child(2) > .ui').contains(role).click()
});