如何在 Cypress 中编写场景大纲特征的步骤定义文件

Question

I'm using Feature file below:

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

    Examples:
    |Role|
    |Admin|
    |Manager|

I'm trying to write a step definition file here, but none of them worked

#1: Passing as parameters ... doesn't work

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

#2: Passing as string values ....doesn't work

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 result of #1 & #2 :

#3 : also tried this and seems to have a better shot cos simply it gave me a different error LOL

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 result for #3 :

HTML for the page I'm testing, I'm trying to get those highlighted values from dropdown items but it has no id or name in front of each item

And I got cy.get('.add-person__inputs--container > :nth-child(2) > .ui') from Cypress selector

HTML tags

<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>

please bear in mind I'm very new to coding but I think the issue is either step definition file or css selector... :(

Thanks in advance :D

Answer 1

它看起来在步骤中调用缺少的引号，尝试一下：

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

Answer 2

So this is what worked for me:

In the feature file:

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

In the step definition file:

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

Answer 3

In Example: change it to string. This worked for me:

Scenario Outline: Admin can send invitations to any user roles And click on dropdown to select role.

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

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()