持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情
.focus() 命令
聚焦 DOM 元素
语法格式
.focus()
.focus(options)
正确写法
cy.get('input').first().focus()
重点
- 必须是 DOM 元素才能调用 .focus() 方法，不一定是要输入框哦
- 确保 DOM 元素是可聚焦的
错误写法
// 不能直接用 cy 调用
cy.focus('#search')
// 必须是 DOM 元素才能调用
cy.window().focus()
options
.blur()
让聚焦的 DOM 元素失焦
语法格式
.blur()
.blur(options)
正确写法
// 输入内容后，再让输入框失焦
cy.get('[type="email"]').type('me@email.com').blur()
// 先聚焦再失焦
cy.get('[tabindex="1"]').focus().blur()
重点
- 必须是 DOM 元素才能调用 .blur() 方法，不一定是要输入框哦
- 确保 DOM 元素是可失焦的
错误写法
// 不能直接用 cy 调用
cy.blur('#search')
// 必须是 DOM 元素才能调用
cy.window().blur()
options
scrollIntoView 作用
将指定 DOM 元素滑动到可视视图中的左上角
语法格式
.scrollIntoView()
.scrollIntoView(options)
正确写法
// 将 footer 元素 滚动到视图中
cy.get('footer').scrollIntoView()
错误写法
// cy 不能直接调用
cy.scrollIntoView('footer')
// 必须是 DOM 元素调用
cy.window().scrollIntoView()
options
实际栗子
html 代码
测试文件代码
测试结果
注意
Cypress 运行的命令快照不会显示滚动的过程，如果要查看滚动的过程，需要用 .pause() 遍历每个命令，或者通过观察测试运行的视频
