如何在 Cypress 中編寫場景大綱特征的步驟定義文件

Question

我正在使用以下功能文件：

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

#1 & #2 的賽普拉斯結果：

#3 : 也試過這個，似乎有更好的鏡頭因為它給了我一個不同的錯誤 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()

#3 的賽普拉斯結果：

我正在測試的頁面的HTML ，我試圖從下拉項中獲取那些突出顯示的值，但每個項前面沒有 id 或名稱

我從 Cypress 選擇器中得到了cy.get('.add-person__inputs--container > :nth-child(2) > .ui')

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 選擇器... :(

提前致謝

Answer 1

它看起來在步驟中調用缺少的引號，嘗試一下：

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

Answer 2

所以這對我有用：

在特征文件中：

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

Answer 3

在示例中：將其更改為字符串。 這對我有用：

場景大綱：管理員可以向任何用戶角色發送邀請並單擊下拉列表以選擇角色。

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