Python writing UI automation playwright (click operation) detailed explanation

0. selector (required)

type:string

describe:A CSS selector or XPath expression that locates the element to be clicked.

is a parameter that must be provided to determine the element to be clicked.

1. Modifiers (optional)

Pass in a list where the keyboard key operations are, such as "Ctrl", "Alt", "Shift", "win key", etc.

type: Array<string>
describe:An array of strings that specifies the modifier key to be pressed. Available modifiers include "Shift", "Control", "Alt", "Meta" (represents the Command key or the Windows key).
Use scenarios
Simulate key combination clicks:If you need to simulate the user pressing the Shift or Control keys and clicking on the element at the same time, you can use the modifiers parameter. For example, the simulated user presses the Ctrl key and clicks the link to open the link in a new tab.
Simulate special operations:In some cases, special keyboard operations need to be simulated. For example, press the Ctrl key in a table and click the cell to select multiple items.

from playwright.sync_api import Page
def test_pw_click(page: Page):
    (url='')
    ('//input[@name="wd"]').fill("Calendar")    page.get_by_text('Baidu').click(modifiers=["Control"]) #Control、Alt、Shift、Meta

2. position(optional)

Pass in a dictionary, {"x":10, "y": 20 }, indicating the offset from the upper left corner of the element at the click position. You can use the bounding_box() method to first check the width and height of this element, and then determine how much offset you want to click. The offset cannot exceed the width and height range of this element. When the operation element is masked, although playwright will automatically find the clickable position, it will be more accurate to display the specified click position in this way.

type:{ x: number, y: number }
describe:Specifies the click position relative to the upper left corner of the element. x and y represent horizontal and vertical offsets, respectively.
Use scenarios:When you need to click in a specific position inside an element, you can use the position parameter. This is useful for situations where you need to click on an icon or button within an element. For example, if there is a button with a drop-down arrow, you might need to click the arrow instead of the entire button area.

from playwright.sync_api import Page
def test_pw_click(page: Page):
    (url='')
    ('//input[@name="wd"]').fill("Translation")    page.get_by_text('Baidu').click()

     # Get element position    page.get_by_text('Baidu Homepage').bounding_box()
     # Return to example: {'x': 1082, 'y': 24, 'width': 52, 'height': 24}     # Indicates the location of this element throughout the interface, as well as the width and height ranges of the element itself
     # Click on the specific location of the element    ("#my-button", position={"x": 10, "y": 10})

3. button (optional)

You can simulate the click of the left and right middle key

type: "left" | "right" | "middle"
describe:Specify the mouse button to use. The default value is "left".
Use scenarios:It needs to be simulated when clicking a right click or other type of mouse button. For example, simulate a right-click to open the context menu.

from playwright.sync_api import Page
def test_pw_click(page: Page):
    (url='')
    ('//input[@name="wd"]').fill("Translation")    page.get_by_text('Baidu').click()
    
    page.get_by_text('Baidu Homepage').click(button="right") #leftLeft key rightRight-click middleMiddle key

4. click_count (optional)

Number of clicks, combined with delay parameters

type: number
describe:Specify the number of clicks. The default is 1, which can be set to 2 to simulate double-click.
Use scenarios:Used when you need to simulate double-clicks or other clicks. For example, double-click a file in the file list to open it.

('//input[@]').click(click_count=3,delay=3_000)

There is another convenient method for double-clicking dblclick(). The parameters in brackets are similar to click():

('//input[@]').dblclick()

5. delay

type:number
describe:Sets the delay time (milliseconds) between two clicks. The default is 0.
Use scenarios:It is necessary to simulate the natural delay when a user clicks, such as adding a brief pause between double-clicks to simulate real user behavior.

6. timeout(optional)

Incoming timeout time

type:number
describe:Sets the maximum waiting time (milliseconds), and a timeout error will be thrown after this time is exceeded. The default is 30000 milliseconds (30 seconds).
Use scenarios:When you need to limit the time when waiting for elements to become clickable. For example, you may not want to wait too long while waiting for the element to appear.

page.get_by_text('#Element to click').click(timeout=1_000) #Timeout，default30s

7. force=True(optional)

In the playwright auto-waiting mechanism, when force=True is set, Playwright will try to force click on the element even if the element is blocked by other elements. This means that Playwright will try to click directly on the target element even if there is a dialog box or other element obscuring the target element.

type:bool
describe:If true, force click on the element even if it is blocked. Default is false.
Use scenarios:When an element is blocked by other elements, you still need to click on it. For example, if a button is blocked by a modal dialog box, it may be necessary to force click the button.

page.get_by_text('#Elements that need to be clicked').click(force=True)

8. trial=True(optional)

It means that only playwright auto-waiting waits without clicking

type: bool
describe:If true, the actual click action is not performed, but instead just try to find the element and check if it is clickable. Default is false.
Use scenarios:It is necessary to verify that the element can be clicked, but the actual click operation is not performed. For example, during the test preparation phase, you may need to check whether all buttons on the page are clickable.

page.get_by_text('#Element to click').click(trial=True) #Check elements before clicking

9. no_wait_after (optional)

Indicates that, in general, if the click operation triggers a navigation event, then pw will wait for the navigation to end, but this may cause the click to fail without ending. This is to avoid this.

type: bool
describe:If true, click without waiting for page navigation or resource loading to complete after clicking. Default is false.
Use scenarios:When the click operation does not cause the page to reload, it only triggers some asynchronous operations (such as AJAX request). For example, if clicking a button just updates part of the page without refreshing the entire page.

page.get_by_text('#Element to click').click(no_wait_after=True) #After clicking, don't wait for the page to load

To summarize, there are several steps for the click operation of playwright:

-waiting mechanism, automatically wait for elements to be successfully clicked unless force=True is set

2. Slide the element to a clickable place

3. Merge the keys in modifiers for clicking, unless trial=True is set

4. Wait for possible navigation to end unless no_wait_after=True is set

Things to note

When using the click method, make sure that the elements are visible and interactive on the page.
When using the position parameter, make sure that the specified coordinates are within the valid range of the element.
Note that if you do not wait for the page to load, it may affect subsequent testing steps.
It should be set reasonably when using the timeout parameter. Too short timeout may cause test failure, and too long may reduce test efficiency.

Familiar with these parameters of the click() method, we can accurately control the click behavior according to our needs, making automated testing more reliable and efficient.

Summarize

This is the article about Python's UI automation playwright. For more related contents of Python automation playwright click operation, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!