亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Cypress - 始終將元素聚焦到距屏幕頂部給定的偏移量

Cypress - 始終將元素聚焦到距屏幕頂部給定的偏移量

aluckdog 2023-09-21 10:54:04
當我在 Cypress 中運行測試時,它總是向下滾動到該元素,因此它位于屏幕的最頂部。但我正在為 WordPress 系統編寫測試,其中固定欄始終位于屏幕頂部,占據 75 像素(左右)。所以當我的測試運行時我永遠看不到發生了什么。有沒有一種方法,我可以為所有測試定義所有元素,以便當它們處于焦點時,它們距頂部 200px?就像全局常數一樣?代碼cy.get( 'tr[data-slug="cmb2"]' ).should( 'have.class', 'active' );請參閱這里的問題:.env解決方案嘗試1:在配置文件中設置如果我可以將它設置在 -file 中,那就太聰明了cypress.json。我閱讀了Cypress Configuration上的文檔,但在那里找不到它。解決方案嘗試 2:使用 CSS 隱藏管理欄我還可以嘗試添加一個樣式表以在后端運行 Cypress-tests 時始終加載。但這是解決這個問題的正常方法嗎?即使我這樣做了,我也不知道該怎么做。解決方案嘗試3:使用scrollIntoView我嘗試添加scrollIntoView一些選項:cy.get( 'tr[data-slug="cmb2"]' ).scrollIntoView({ offset: { top: 150, left: 0 } }).should( 'have.class', 'active' );但當我將鼠標懸停在 div 上時,我仍然看不到它的標題。我也嘗試了這里建議的解決方案,看起來有點像它。解決方案嘗試4:將scrollBehavior添加到我的.env文件中我將其添加到我的.env文件中:{   "env": {      "name": "staging",      ...   },   "viewportWidth": 1100,   "viewportHeight": 1800,   "watchForFileChanges": false,   "chromeWebSecurity": true,   "scrollBehavior": "bottom"   <---- My attempt!}但沒有雪茄:
查看完整描述

1 回答

?
紅顏莎娜

TA貢獻1842條經驗 獲得超13個贊

.scrollIntoView() 偏移量應該為負數

it('make Elvis appear', () => {

? cy.viewport(750,480)

? cy.visit('https://mui.com/getting-started/templates/dashboard/');


? cy.contains('Elvis Presley').scrollIntoView({offset:{top: -100}})

})?

使用原生的scrollIntoView


it('make Elvis appear', () => {

? cy.viewport(750,480)

? cy.visit('https://mui.com/getting-started/templates/dashboard/');


? // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

? cy.contains('Elvis Presley')

? ? .then($el => $el[0].scrollIntoView(false)) // scrolls $el to bottom

})

使標題透明


it('make Elvis appear', () => {

? cy.viewport(750,480)

? cy.visit('https://mui.com/getting-started/templates/dashboard/');


? cy.get('header').invoke('css', 'opacity', '0')

? cy.contains('Elvis Presley').scrollIntoView()

})

使用 .scrollTo()


此命令適用于滾動容器,而不是您定位的元素,因此定位可能不會每次都正確顯示。


function getScrollParent(node) {

? if (node == null) return null;


? if (node.scrollHeight > node.clientHeight) {

? ? return node;

? } else {

? ? return getScrollParent(node.parentNode);

? }

}


it('make Elvis appear', () => {

? cy.viewport(750,480)

? cy.visit('https://mui.com/getting-started/templates/dashboard/');


? cy.contains('Elvis Presley')

? ? .then($el => {

? ? ? const scrollParent = getScrollParent($el[0])

? ? ? cy.wrap(scrollParent).scrollTo('center')

? ? })

})


查看完整回答
反對 回復 2023-09-21
?
波斯汪

TA貢獻1811條經驗 獲得超4個贊

解決了 get()、contains()、click() 上的網站頂部菜單隱藏元素的問題。


將以下內容添加到 Cypress 全局配置或測試配置。


從我的 cypress.config.ts (簡化為焦點):


import { defineConfig } from 'cypress'


export default defineConfig({


  e2e: {

    scrollBehavior: false

  }

})

然后使用 cy.scrollTo()、cy.scrollIntoView() 動態地“手動”滾動……


查看完整回答
反對 回復 2023-09-21
  • 1 回答
  • 0 關注
  • 166 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號