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')
? ? })
})

TA貢獻1811條經驗 獲得超4個贊
解決了 get()、contains()、click() 上的網站頂部菜單隱藏元素的問題。
將以下內容添加到 Cypress 全局配置或測試配置。
從我的 cypress.config.ts (簡化為焦點):
import { defineConfig } from 'cypress'
export default defineConfig({
e2e: {
scrollBehavior: false
}
})
然后使用 cy.scrollTo()、cy.scrollIntoView() 動態地“手動”滾動……
添加回答
舉報