賽普拉斯命令和自定義命令:21 個重要事實

目錄

賽普拉斯命令

什麼是賽普拉斯命令?

Cypress 為我們提供了 API 和方法來與應用程序的 UI 進行交互。 它們被稱為 Cypress 命令,有助於與 Web 應用程序進行交互。 所有可用的命令都有內置方法,我們只會在我們的測試用例中調用這些方法。 Cypress 命令將模擬與嘗試對應用程序執行操作的用戶類似的操作。

Cypress 提供的 UI 交互命令

Cypress 提供了與 UI 交互的不同命令。 我們將詳細查看所有命令的列表。

  • 。點擊()
  • .dblclick()
  • 。右鍵點擊()
  • 。類型()
  • 。清除()
  • 。查看()
  • .uncheck()
  • 。選擇()
  • 。扳機()

賽普拉斯點擊命令

。點擊() – 這個命令是為了 點擊 DOM 上的任何元素。

以下是單擊命令的語法

.click() 

.click(options) 

.click(position) 

.click(position, options) 

.click(xCoordinate, yCoordinate) 

.click(xCoordinate, yCoordinate, options) 

正如你在上面看到的,點擊接受類似的參數 選項,位置, 坐標.

選項

可以傳遞給 click 的可能選項是

選項預設產品產品描述
ALT鍵打開 Alternate 鍵(Mac 中的 Option 鍵),如 optionKey
ctrlKey打開控制鍵。 也稱為: controlKey.
元密鑰激活元鍵(Windows 中的 Windows 鍵或 Mac 中的命令鍵)。 還: commandKeycmdKey.
移位鍵啟動換檔鍵
登錄在命令行中打印日誌
強制此選項強制操作並禁用等待可操作性
多種依次單擊多個元素
超時默認命令超時.click() 在解決超時之前等待的時間
等待動畫等待動畫在執行命令之前等待元素完成動畫的選項
單擊中的選項

位置

可以傳遞給 .click() 的不同類型的位置是

  • 中央 (默認)
  • 離開
  • 權利
  • 最佳
  • 左上方
  • 右上
  • 底部
  • 左下方
  • 右下角

cy.get('btn').click() //點擊按鈕 cy.get('btn').click({ force: true }) //通過傳遞選項'force'作為true點擊按鈕 cy. get('btn').click('bottomRight') // 點擊右下角的按鈕 cy.get('btn').click(10, 70, { force: true }) // 點擊按鈕位置值和強制為真

賽普拉斯雙擊命令

可以通過使用實現雙擊 dblclick() 賽普拉斯中的語法。

句法

.dblclick()
.dblclick(position)
.dblclick(x, y)
.dblclick(options)
.dblclick(position, options)
.dblclick(x, y, options)

選項

.dblclick() 接受所有被接受的選項 .click(). 您可以在上一節中找到選項。

位置

中指定的所有可能位置 .click() 也可用 dblclick(). 職位列表可以在上面的部分找到。

cy.get('button').dblclick() // 雙擊按鈕 cy.focused().dblclick() // 雙擊焦點元素 cy.contains('Home').dblclick() // 雙擊單擊包含'Home'的第一個元素 cy.get('button').dblclick('top') // 雙擊頂部位置的按鈕 cy.get('button').dblclick(30, 10) //雙擊 30 和 10 的坐標

Cypress 右鍵單擊命令

這個 Cypress 命令,右鍵單擊 DOM 元素 .rightclick() 命令不會打開瀏覽器的上下文菜單.rightclick() 用於測試應用程序中右鍵單擊相關事件的處理,例如 contextmenu.

句法

.rightclick()
.rightclick(position)
.rightclick(options)
.rightclick(position, options)
.rightclick(x, y)
.rightclick(x, y, options)

選項

正如我們在上面看到的,所有被接受的選項 .click() 命令可以配置為 .rightclick() 命令也是。

位置

所有可能的位置都可以傳遞給 .rightclick().click() 上文提到的。

cy.get('.welcome').rightclick() // 右鍵點擊 .welcome cy.focused().rightclick() // 右鍵點擊有焦點的元素 cy.contains('January').rightclick() / / 右鍵單擊包含'January'的第一個元素 cy.get('button').dblclick('topRight') // 雙擊右上角位置的按鈕 cy.get('button').dblclick(80, 20 ) // 雙擊80和20的坐標

賽普拉斯類型命令

.type() 命令將值輸入到 DOM 元素中。

句法

.type(text)
.type(text, options)

參數

.type() 接受字符串作為參數。 傳遞給的值 .type() 可以包含下面給出的任何特殊字符序列。

序列筆記
{{}輸入文字 { 關鍵
{backspace}刪除光標從右到左的字符
{del}從光標的左到右刪除字符
{downarrow}向下移動光標
{end}將光標移動到行尾
{enter}輸入 Enter 鍵
{esc}鍵入 Escape 鍵
{home}將光標移動到行首
{insert}將字符置於光標右側
{leftarrow}向左移動光標
{movetoend}將光標移動到可鍵入元素的末尾
{movetostart}將光標移動到可鍵入元素的開頭
{pagedown}向下滾動
{pageup}向上滾動
{rightarrow}向右移動光標
{selectall}通過創建一個選擇所有文本 selection range
{uparrow}向上移動光標

選項

我們可以傳入對像作為選項來修改默認行為 .type()

選項預設產品產品描述
delay10每次按鍵後延遲時間的選項
forcefalse強制執行和禁用操作 等待可操作性
logtrue顯示日誌 命令日誌
parseSpecialCharSequencestrue解析被包圍的字符串的特殊字符 {}如 {esc}. 您可以將選項設置為 false 輸入文字字符。
releasetrue此選項允許啟用修改器在命令之間保持激活
scrollBehaviorscrollBehavior在執行任何命令之前要滾動元素的視口位置
timeoutdefaultCommandTimeout等待的時間 .type() 命令在超時前解決
waitForAnimationswaitForAnimations表示是否等待元素 完成動畫 在執行任何命令之前。
type 命令的選項

讓我們看看例子 .type() 命令

cy.get('textarea').type('Hey there') // 在文本區域輸入值 cy.get('body').type('{shift}') //啟用shift鍵 cy.get ('body').type('{rightarrow}') //類型事件右箭頭 

賽普拉斯清除命令

清除命令將清除輸入區或文本字段中的值。

句法

clear 命令的語法如下。

.clear()
.clear(options)

選項

我們將研究可以傳遞給 .clear() 命令。

選項預設產品產品描述
forcefalse這將強制操作並禁用等待可操作性發生
logtrue在命令日誌中顯示命令
scrollBehaviorscrollBehavior在執行命令之前元素必須滾動到的視口位置
timeoutdefaultCommandTimeout這個選項是等待的時間 .clear() 在超時之前解決
waitForAnimationswaitForAnimations這將在執行命令之前等待元素完成動畫。
清除命令的選項

讓我們看看 clear 命令的例子

cy.get('[type="text"]').clear() // 清除文本類型的輸入 cy.get('textarea').type('Welcome!').clear() // 清除文本區域 cy .focused().clear() // 清除焦點輸入/文本區域

賽普拉斯檢查命令

check 命令將檢查或簡單地說,勾選複選框或單選按鈕。 您可以使用 .uncheck() 命令。

句法

我們將了解 Cypress 中 check 命令的語法。

//Syntax for check command
.check()
.check(value)
.check(options)
.check(values, options)

//Syntax for uncheck command
.uncheck()
.uncheck(value)
.uncheck(options)
.uncheck(values, options)

選項

可以傳遞給檢查/取消檢查命令的可能選項與上面列出的清除命令相同

我們將研究如何使用檢查和取消檢查命令的示例。

cy.get('[type="checkbox"]').check() // 檢查復選框元素 cy.get('[type="radio"]').first().check() // 檢查第一個收音機element cy.get('[type="radio"]').check('Male') //檢查有男性的radio元素 cy.get('[type="checkbox"]').uncheck() / /取消選中復選框元素 cy.get('[type="radio"]').uncheck() //取消選中第一個單選元素 cy.get('[type="checkbox"]').uncheck('Breakfast') // 取消選中早餐元素

賽普拉斯選擇命令

select Cypress 命令允許您選擇一個元素標籤。

句法

以下是 select 命令的語法

.select(value)
.select(values)
.select(value, options)
.select(values, options)

選項

我們可以傳入選項來修改 select 命令的默認行為。

選項預設產品產品描述
forcefalse此選項強制執行操作並禁用等待可操作性
logtrue顯示命令日誌中的日誌,默認設置為true
timeoutdefaultCommandTimeout這個選項是等待的時間 .select() 在超時之前解決
選擇命令的選項

讓我們看一下 select 命令的示例

cy.get('select').select('butterfly') // 選擇 'butterfly' 選項 cy.get('select').select(0) // 選擇索引為 0 的元素 cy.get('select ').select(['parrot', 'peacock']) //選擇鸚鵡和孔雀選項

賽普拉斯觸發命令

觸發命令有助於觸發元素上的任何事件。

句法

我們將研究訪問觸發器命令的語法

.trigger(eventName)
.trigger(eventName, position)
.trigger(eventName, x, y)
.trigger(eventName, position, options)
.trigger(eventName, options)
.trigger(eventName, x, y, options)

選項

觸發器命令接受所有提到的選項 .clear() 命令。 此外,我們可以配置的選項很少,如下所示。

選項預設產品產品描述
bubblestrue事件是否應該冒泡
cancelabletrue活動是否可以取消
eventConstructorEvent用於創建事件對象的構造函數(例如 MouseEvent, keyboardEvent)
觸發命令選項

讓我們用不同的方式 .trigger() 在代碼中。

cy.get('a').trigger('mouseover') // 在鏈接上觸發 mouseover 事件 cy.get('.target').trigger('mousedown', { button: 0 }) //mousedown 觸發於button 0 cy.get('button').trigger('mouseup', topRight, { bubbles: false }) //mouseup 在 topRight 位置觸發,設置 bubble 為 false

賽普拉斯命令是異步的嗎?

所有賽普拉斯命令都是異步的。 它們會在稍後的時間點排隊等待執行,並且不會等待命令完成。 Cypress 命令在調用時不執行任何操作,而是將其保存以供稍後執行。 你可以理解 Cypress 的異步行為 這裡

賽普拉斯可鏈接命令

在 Cypress 中,我們可以使用一系列命令與 DOM 中的元素進行交互。 必須了解命令鏈在內部是如何工作的。 如果我們在特定行中鏈接命令,那麼 Cypress 將根據命令鏈處理承諾,並根據下一個命令的主題產生命令,直到命令鏈結束或發生錯誤。

Cypress 允許我們使用 .click() or .type() 通過使用獲取元素來命令 cy.get() or cy.contains(). 讓我們看一個簡單的鏈接命令示例

cy.get('textarea').type('你好嗎?')

在上面的示例中, cy.get() 是一個 Cypress 命令和 .type() 是另一個命令,我們在其中鏈接 .type() 命令到 cy.get() 命令,告訴它輸入從 cy.get() 元素。 同樣,我們可以鏈接上面討論的所有命令。

在 Cypress 中鏈接斷言命令

類似於使用 Cypress 鏈接多個命令,我們也可以使用命令鏈接斷言。 斷言是讓你描述 預期 應用程序的狀態或行為。 Cypress 將等待直到元素達到預期狀態,如果斷言不通過,則測試將失敗。 我們將看到如何在斷言元素時使用鏈接命令。

cy.get('button').should('be.disabled') //期望按鈕是否應該被禁用 cy.get('form').should('have.class', 'form-vertical') / /expect 表單是否應該有 'form-vertical' 類 cy.get('input').should('not.have.value', 'Name') // 斷言輸入是否不應該有值 'Name '

如上所述,我們正在使用 cy.get() 命令並將其與 .should() 斷言命令以期望基於結果的行為。 這樣,我們就可以使用鏈 Cypress 中的斷言命令.

賽普拉斯自定義命令

賽普拉斯為我們提供 API 以根據我們的要求創建命令。 Cypress 自定義命令類似於預先存在的默認命令,除了它是 用戶自定義. 使用自定義命令,我們可以使用命令並根據我們的用例鏈接它們。 如果您需要在測試中反複使用 Cypress 自定義命令,則它們在我們的工作流程中非常有用。

讓我們看看在 Cypress 中創建新自定義命令的語法。

Cypress.Commands.add(name, callbackFn)
Cypress.Commands.add(name, options, callbackFn)
Cypress.Commands.overwrite(name, callbackFn)

其中參數如下

名稱 – 我們要添加或覆蓋的字符串中命令的名稱

回調函數 – 此函數接受傳遞給命令的參數

方案 – 傳遞任何選項對象來定義命令的行為

備註 : 選項僅支持添加命令和 不支持覆蓋命令

選項接受預設產品產品描述
prevSubjectBooleanString or Arrayfalse定義如何處理先前產生的主題。

選項 prevSubject 接受如下

  • false – 忽略以前的主題(父命令)
  • true – 接受先前的科目(子命令)
  • optional – 傳入是否要啟動新鍊或使用現有鏈(雙命令)

Cypress 中的父級自定義命令

我們將看到如何在 Cypress 中添加父自定義命令。 父命令將始終開始一個新的命令鏈,即使您已經鏈接了前一個命令。 先前鏈接的命令將被忽略,新命令將始終鏈接。 一些父命令是 cy.visit(), cy.get(), cy.request(),cy.exec(), cy.route()

我們將看到如何在 Cypress 中編寫父自定義命令的示例

Cypress.Commands.add('clickLink', (label) => { cy.get('a').contains(label).click() }) //點擊“立即購買”鏈接 cy.clickLink('Buy現在')

在上面的例子中,'點擊鏈接' 是我們自定義命令的名稱。 它將搜索 標籤. 在第 2 行,命令得到 'a',然後搜索包含標籤的鏈接並單擊該元素。 cy.clickLink() 將執行測試文件中的操作並單擊“立即購買“鏈接。

Cypress 中的子自定義命令

Cypress 中的子自定義命令與父命令或另一個子命令鏈接在一起。 來自上一個命令的主題將被交給回調函數。

一些可以作為子命令鏈接的 Cypress 命令是 .click(), .trigger(), .should(), .find(), .as()

我們將研究如何鏈接子自定義命令的示例

Cypress.Commands.add('forceClick', {prevSubject: 'element'}, (subject, options) => { // 包裝現有主題並對其進行處理 cy.wrap(subject).click({force:true }) }) //訪問測試文件中的forceClick cy.get("[data-test='panel-VALUES']").forceClick();

在上面的示例中,我們將自定義命令命名為“強制點擊'。 我們將 prevSubject 參數傳遞給元素並包裝現有的主題。 和 cy.wrap(),我們強制點擊主題。 然後在測試文件中,我們訪問自定義命令,'強制點擊' 在 cy.get() 命令。

Cypress 中的雙重自定義命令

雙自定義命令是父命令和子命令之間的混合。 您可以開始一個新的命令鍊或鏈接一個現有的命令。 如果我們希望我們的命令在有或沒有現有主題的情況下以不同的方式工作,雙重命令會很有幫助。

一些可用於雙命令的命令是 cy.contains(), cy.screenshot(), cy.scrollTo(), cy.wait()

讓我們看一個如何使用雙重自定義命令的例子

Cypress.Commands.add('getButton', { prevSubject: 'optional' }, (subject) => { if (subject) { cy.get(subject).get('btn').its('button'); } else { cy.get('btn').its('button'); } })

在某些情況下,我們需要使用 getButton 來獲取文本的按鈕,它會獲取元素的所有按鈕。 現在我們可以使用 getButton 將 與父元素鏈接或鏈接子元素,它可以在其中調用父元素。

由於 prevSubject 是可選的,我們可以將主題作為參數傳遞,也可以在測試文件中調用沒有主題的命令,如下所示

cy.getButton() // 沒有主題 cy.get('#loginBtn').getButton() // 有主題

覆蓋現有的賽普拉斯命令

我們可以覆蓋已經存在的 Cypress 命令並修改行為,以避免創建另一個會在最後嘗試使用原始命令的命令。

一些可以覆蓋的原始賽普拉斯命令是 cy.visit(), cy.type(), cy.screenshot(), cy.contains()

讓我們看看一個 關於我們如何覆蓋現有賽普拉斯的示例 命令。

Cypress.Commands.overwrite('contains', (originalFn, subject, filter, text, options = {}) => { // 判斷是否傳遞了過濾器參數 if (typeof text === 'object') { options = text text = filter filter = undefined } options.matchCase = false return originalFn(subject, filter, text, options) } )

正如我們在上面看到的,我們正在使用 賽普拉斯.Commands.overwrite 修改現有的 Cypress 命令。 我們將自定義命令命名為 contains 並且我們正在傳遞參數以確定過濾器參數是否已通過。

賽普拉斯導入命令

在本節中,我們將了解如何導入 Cypress 命令。

我們必須在 賽普拉斯/支持/commands.js 文件。 我們將在 command.js 文件中添加自定義命令並在我們的測試用例文件中導入以使用它。

Command.js 文件

賽普拉斯自定義命令與示例

我們將通過實時示例了解如何創建自定義命令並在我們的規範文件中使用它。

正如我們在上面看到的,我們必須在下面添加新的自定義命令 命令.js 文件。 在該文件中,讓我們為登錄功能添加一個自定義命令

Cypress.Commands.add("login", (username, password) => { //添加一個名為 login 的新命令 cy.get('[id=Email]').clear(); cy.get('[id =Email]').type(username); cy.get('[id=Password]').clear(); cy.get('[id=Password]').type(password); cy.get( '[type=submit]').click(); });
command.js 文件中的自定義命令

在上面的代碼中,我們將自定義命令命名為 登錄. 在自定義命令中,我們添加了清除用戶名字段和在文本字段中輸入值的步驟。 同樣,我們正在清除該字段並在密碼字段中添加密碼。 稍後,我們單擊提交按鈕。 這是一個簡單的自定義命令,它接受兩個參數:用戶名和密碼。 我們將在我們的規範文件中傳遞用戶名和密碼的值。

現在讓我們創建一個名為的規範文件 customCommand.spec.js 在集成文件夾下。 我們的規範文件將包含以下代碼

describe("自定義命令示例", () => { it("應該使用自定義命令登錄", () => { cy.visit("https://admin-demo.nopcommerce.com/"); cy .login("admin@yourstore.com", "admin"); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });
訪問自定義命令的規範文件

正如我們在上面看到的,我們正在訪問我們的自定義命令 cy.login() ,我們在這里傳遞用戶名和密碼的值。

賽普拉斯自定義命令 IntelliSense

IntelliSense 在我們編寫測試時直接在 IDE 或代碼編輯器中提供智能代碼建議。 它通過顯示一個顯示命令定義、指向文檔頁面和代碼示例的鏈接的彈出窗口來提供幫助。 如果我們使用任何現代代碼編輯器,如 Visual Studio Code 或 IntellJ,那麼 IntelliSense 將非常有用。

IntelliSense 使用 Typescript 來理解和顯示語法。 如果我們編寫自定義命令並為自定義命令提供 TypeScript 定義,我們就可以使用三重斜杠來顯示 IntelliSense,即使我們的項目僅使用 JavaScript。

要配置 IntelliSense,我們需要在代碼中描述 柏樹/支持/ index.d.ts 文件。

// Cypress 對象“cy”的類型定義 /// 聲明命名空間賽普拉斯 { 接口可鏈{ /** * 使用憑據登錄 * @example * cy.login(username,password) */ login(username: String, password: String): Chainable } }

現在,我們應該讓我們的規範文件知道在 索引.d.ts 文件。 因此,在我們的規範文件的開頭,添加以下代碼讓 IntelliSense 為我們提供建議。

// 自定義命令的類型定義,如“login” // 將解析為“cypress/support/index.d.ts” //
IntelliSense 提供的建議

正如我們在上面看到的,IntelliSense 為我們提供了我們在 command.js 文件中提供的參數,並有助於自動完成。

回到頁首