我想使用cypress找到一個可點擊的元素。可點擊元素始終包含文本“登錄”并且位于容器 div 內。然而，美中不足的是，我不知道是否可點擊的元素是使用建模<button>，<a>或<input type="submit">。
我的 HTML 有時看起來像這樣：
<nav>
<button>Wrong Login Button</button>
</nav>
<div class='container'>
...
<div>
<h2>Login</h2>
...
<button>Login</button>
</div>
</div>
有時像這個例子：
<div class='container'>
...
<div>
<h2>Login</h2>
...
<div>
<div>
<a>Login</a>
</div>
</div>
</div>
</div>
它有時是一個<button>，有時是一個<a>或<input type="submit">。有時那里還有更多嵌套的 div。
如何使用 cypress 找到可點擊元素（按鈕、a 或提交）元素？
我只想找到可點擊的元素，所以如果有一個帶有“登錄”文本的標題，它應該被忽略。
這幾乎就是答案：
cy.get('.container').contains('Login')
但是，我以某種方式需要忽略除（按鈕、a 和輸入 [type=submit]）之外的所有元素。因為否則它會回傳
登錄
我需要類似的東西：
cy.get('.container').find('button OR a OR input[type=submit]').contains('Login')
我想寫一個自定義命令，可以用作下面的示例：
cy.get('.container').findClickable('Login')
實作可能類似于以下示例：
Cypress.Commands.add('findClickable', {prevSubject: ['element']}, (
subject: Cypress.Chainable<HTMLElement>,
text: string,
options?: Partial<Cypress.Loggable & Cypress.Timeoutable & Cypress.Withinable & Cypress.Shadow>,
) => {
const buttons = cy.wrap(subject).find('button').contains(text)
const links = cy.wrap(subject).find('a').contains(text)
const submits = cy.wrap(subject).find('input[type=submit]').contains(text)
if (buttons.length links.length submits.length !== 1) {
throw new DOMException(
`Didn't find exactly one element. Found ${buttons.length} buttons, ${links.length} links, and ${submits.length} submits.`)
}
if (buttons.length === 1)
return buttons[0]
else if (links.length === 1)
return links[0]
else
return submits[0]
})
我知道由于多種原因，上面的代碼不起作用。首先，沒有 .length 屬性，其次，由于第一個 find('buttons') 方法超時，cypress 會失敗。
有誰知道如何以正確的方式實作自定義命令？
uj5u.com熱心網友回復：
您可以將withinandcontains命令與選擇器和文本結合使用。
cy.get('.container').within(() => {
cy.contains('button', 'Login').click()
cy.get('input[type=submit]').click()
cy.contains('Login').click()
})
對于多次登錄，首先我們檢查按鈕是啟用還是禁用，然后我們點擊它。
cy.contains('Login').each(($ele) => {
if($ele.is(":enabled")){
cy.wrap($ele).click()
}
})
您也可以這樣做，這是針對上述代碼段的更優化代碼。
cy.contains('Login').filter(':enabled').click()
uj5u.com熱心網友回復：
用逗號分隔時可以搜索多個選擇器：
cy.get('button, a, input[type=submit]')
因此，搜索所有可點擊元素，然后過濾包含所需文本的可點擊元素。
Cypress.Commands.add('findClickable', {prevSubject: ['element']}, (
subject: Cypress.Chainable<HTMLElement>,
text: string,
_options?: Partial<Cypress.Loggable & Cypress.Timeoutable & Cypress.Withinable & Cypress.Shadow>,
) =>
cy.wrap(subject)
.find('button, a, input[type=submit]')
.filter(':contains(' text ')'),
)
用法：
cy.get('.container').findClickable('Login')
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/373344.html
標籤：javascript html 打字稿 测试 柏
上一篇：硒元素不能與相同的id互動