Cypress DOM 快照和雲中一致的影像差異
測試失敗時儲存頁面
Cyclope:如果 Cypress 測試失敗,請儲存帶有樣式的整頁
使用 Cypress Test 中的 LocalStorage 設定初始數據
測試拖曳項目
cy.session指令簡介
獎勵 39:在測試失敗時儲存整個 HTML 頁面
將此插件新增到您的專案中。假設 Cypress 是開發依賴項
$ npm i -D cyclope# 或如果你喜歡yarn$ yarn add -D cyclope
包含支援文件或單一規格文件中的插件
// 在 cypress/support/index.js// https://github.com/bahmutov/cyclopeimport 'cyclope'
// cypress.config.jsconst { DefineConfig } = require('cypress')module.exports = DefineConfig({ e2e: {setupNodeEvents(on, config) { // https://github.com/bahmutov/cyclope require('cyclope/plugin')(on, config) // 重要的是傳回設定物件 // 以及任何變更環境變數回傳配置}, },})
包含插件檔案中的插件
// cypress/plugins/index.jsmodule.exports = (on, config) => { // https://github.com/bahmutov/cyclope 需要('獨眼巨人/插件')(上,配置) // 重要的是返回配置對象 // 任何更改的環境變數 返回配置}
如果您需要儲存目前的網頁應用程式頁面,包括任何資源
// cypress/integration/spec.jsit('儲存頁面', () => { // 普通賽普拉斯指令 cy.contains('.some-selector', 'some text').should('be.visible')//當應用程式達到所需狀態時//將頁面保存在資料夾「page」中。 '頁')})
所有本機資源(例如圖像和 CSS)都應儲存為本機檔案。您可以建立 zip 存檔
// 使用 .zip 副檔名將資料夾壓縮到檔案中 cy.savePage('page.zip')
儲存 zip 時,函數會產生一個具有檔案名稱、寬度和高度屬性的物件。
removeIframes
(預設為 false)在儲存之前從頁面中刪除所有<iframe>
元素
cy.savePage('名稱', { removeIframes: true })
ignoreFailedAssets
(預設為 false)在部分資源無法載入時忽略失敗
cy.savePage('名稱', {ignoreFailedAssets: true })
該模組包括一個實用程式函數,用於在測試失敗時保存頁面。您可以將此函數用作afterEach
掛鉤,可能來自支援文件,因此它適用於所有測試。
// 在 cypress/support/index.js// https://github.com/bahmutov/cyclopeimport { savePageIfTestFailed } from 'cyclope'afterEach(() => { savePageIfTestFailed() // 以防專案中的部分資源損壞 savePageIfTestFailed({ignoreFailedAssets: true })})
預設情況下,僅在非互動模式cypress run
下儲存頁面。如果即使在cypress open
模式下執行時也想儲存頁面,請使用選項saveInteractive
savePageIfTestFailed({ saveInteractive: true })
所有頁面都保存在資料夾cypress/failed/<spec name>/<test name>
中。
提示:將cypress/failed
作為測試工件儲存在 CI 上。如果測試失敗,請下載並開啟folder/index.html
以檢查失敗時應用程式的結構。
別clope
使用外部 Cyclope 影像服務產生一致的 PNG 影像。執行 Cypress 時需要CYCLOPE_SERVICE_URL
和CYCLOPE_SERVICE_KEY
環境變數。支援懸停
cy.get('#theme-switcher').realHover().cyclope('hover-over-sun.png')//儲存產生的「hover-over-sun.png」圖片//相當於cy.get (' #主題切換器').realHover()cy.clope()
如果您想在未配置 Cyclope 服務的情況下簡單地跳過 DOM 上傳和圖像生成,請設定 Cypress 環境選項,例如使用cypress.json
文件
{“env”:{“cyclope”:{“skipUploadWithoutUrl”:true} } }
您可以透過使用環境變數DEBUG=cyclope
來執行測試,使用偵錯模組在終端中啟用詳細偵錯訊息
$ DEBUG=cyclope npx cypress run
獨眼巨人的待辦事項應用程式
數獨模擬模組
作者:Gleb Bahmutov <[email protected]> © 2021
@巴穆托夫
格巴穆托夫網站
部落格
影片
簡報
賽普拉斯提示
許可證:MIT - 使用程式碼做任何事情,但如果它不起作用,請不要責怪我。
支援:如果您發現此模組有任何問題,請發送電子郵件/推文/在 Github 上開啟問題
版權所有 (c) 2021 Gleb Bahmutov <[email protected]>
特此免費授予任何獲得本軟體和相關文件文件(「軟體」)副本的人不受限制地使用本軟體,包括但不限於使用、複製、修改、合併的權利、發布、分發、再授權和/或銷售軟體的副本,並允許向其提供軟體的人員這樣做,但須滿足以下條件:
上述版權聲明和本授權聲明應包含在本軟體的所有副本或主要部分中。
本軟體以「現況」提供,不提供任何明示或暗示的保證,包括但不限於適銷性、特定用途的適用性和不侵權的保證。 IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE軟體.