Playwright - Scroll bar operation

During the operation of the page , More or less, there will always be an operation on the scroll bar , This article mainly introduces the use of automation tools Playwright Two ways to operate .

One 、 Operate the scroll bar through page elements

1.1 The scene that

If the element already appears in the page , Just because the scroll bar doesn't scroll down , So I can't see . stay Chrome Pass through F12 Debug view page elements .** Not that the element doesn't exist at all , Delay loading when scrolling .** This can be used . To achieve the purpose of moving the scroll bar .

1.2 Sample code

#  Page scroll bar , Scroll until the element appears 
page.locator("//div[contains(@class, 'react-grid-item')][last()]")
	.scroll_into_view_if_needed()
#  Element description ： find class It contains ‘react-grid-item’ Attribute last attribute 

Two 、 By invoking the mouse API Operate the scroll bar

2.1 The scene that

If there are two scrollbars in the page , To manipulate the target scroll bar , First, use the current cursor to move to the box where the scroll bar is located （div 、iframe etc. ）

2.2 Sample code

#  Move the cursor to the box where the scroll bar is located 
page.click("div.content-main")
#  Scroll the mouse  ,  Parameter gives a larger value , To ensure that it moves directly to the end 
page.mouse.wheel(0,10000)