Playwright - 滚动条操作

Playwright - 滚动条操作

在页面的操作过程中，多多少少总会遇到对滚动条的操作，本文章主要介绍一下使用自动化工具Playwright操作的两种方式。

一、通过页面元素操作滚动条

1.1 场景说明

在页面中如果元素已经出现了，只是因为滚动条未滚动至下面，所以看不到。在Chrome中可通过F12调试查看页面元素。**而不是元素根本就没有，当滚动时才延迟加载。**可使用此种方式。达到以移动滚动条的目的。

1.2 示例代码

# 页面滚动条，滚动直到此出现元素
page.locator("//div[contains(@class, 'react-grid-item')][last()]")
	.scroll_into_view_if_needed()
# 元素说明：找到class里包含‘react-grid-item’属性最后一个属性

二、通过调用鼠标API操作滚动条(解决延迟加载时问题)

2.1 场景说明

解决延迟加载时问题
在页面中如果有两个滚动条，要操作目标滚动条，首先要使用当前光标移动至滚动条所在框中（div 、iframe等）

2.2 示例代码

# 光标移动至滚动条所在框中
page.click("div.content-main")
# 滚动鼠标 , 参数给一个较大值，以保证直接移动至最后
page.mouse.wheel(0,10000)