1 回答

TA貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超13個(gè)贊
.scrollIntoView() 偏移量應(yīng)該為負(fù)數(shù)
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
})
使標(biāo)題透明
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()
此命令適用于滾動(dòng)容器,而不是您定位的元素,因此定位可能不會(huì)每次都正確顯示。
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貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超4個(gè)贊
解決了 get()、contains()、click() 上的網(wǎng)站頂部菜單隱藏元素的問題。
將以下內(nèi)容添加到 Cypress 全局配置或測試配置。
從我的 cypress.config.ts (簡化為焦點(diǎn)):
import { defineConfig } from 'cypress'
export default defineConfig({
e2e: {
scrollBehavior: false
}
})
然后使用 cy.scrollTo()、cy.scrollIntoView() 動(dòng)態(tài)地“手動(dòng)”滾動(dòng)……
添加回答
舉報(bào)