Automated test tool playwright (quick start)

Automated test tool

Playwright（ Quick start ）

Catalog

1、 Preface

2、 brief introduction

3、 install

4、 Interactive mode

5、 Recording mode

6、 Writing mode

1、 Preface

At the mention of UI Automated test tool , The first recommendation must be Selenium, Its advantage lies in cross platform 、 Cross language 、 Fully open source 、 There are no restrictions on business users 、 Support distributed 、 Have mature communities and learning documents , It has been iteratively updated to 4 edition . Then there are shortcomings , For example, environment configuration 、 Low loading efficiency 、 Slow running speed, etc .

except Selenium Is there no other tool recommended ？ Of course not. , There are also many excellent tools , such as Cypress、Robot Framework etc. .

This article will introduce another powerful and easy-to-use UI Automated test tool -Playwright.

2、 brief introduction

Microsoft open source automated testing tool Playwright, Support for mainstream browsers , Include ：Chrome、Firefox、Safari etc. , It also supports headless mode 、 Head mode operation , And provides synchronization 、 Asynchronous API, Can combine Pytest The test framework uses , It also supports automatic script recording and other functions on the browser side .

characteristic ：

1、 Cross browser .Playwright Support all modern rendering engines , Include Chromium、WebKit and Firefox.

2、 Cross platform . stay Windows、Linux and macOS Local or CI、 Headless or headless test .

3、 Cross language . stay TypeScript、JavaScript、Python、.NET、Java Use in Playwright API.

4、 Test the mobile network . Apply to Android and Mobile Safari Of Google Chrome Native mobile simulation . The same rendering engine applies to your desktop and cloud .

Official website address ：

https://playwright.dev

GitHub Address ：

https://github.com/microsoft/playwright

3、 install

Playwright Support for cross language , This article will use Python Explain .

First install Python（ Yes Python Environmental Science ）.

Then open the command line , Enter the installation command .

pip install --upgrade pip
pip install playwright
playwright install

Copy

4、 Interactive mode

Playwright Support interaction mode , That is, run single line code or code block , It can give the running result immediately .

because Playwright Support synchronous and asynchronous API, Then you should first understand what is synchronous and asynchronous ？

Sync , After executing a function or method , Wait for the system to return a value or message , At this point, the program is blocking , Only after receiving the returned value or message, can other commands be executed .

asynchronous , After executing a function or method , There is no need to block waiting for return values or messages , Just delegate an asynchronous procedure to the system , So when the system receives a return value or message , The system will automatically trigger the asynchronous process of the delegation , To complete a complete process .

Next, open the browser by operation , Visit Baidu Homepage , Take closing the browser as an example .

1、 Synchronization command

Open the command line , Input python

Enter into Python In interactive mode , Enter the following command ：

from playwright.sync_api import sync_playwright
playwright = sync_playwright().start()
browser = playwright.chromium.launch(headless=False)
page = browser.new_page()
page.goto("https://www.baidu.com/")
browser.close()
playwright.stop()

Copy

Enter the command to visit Baidu homepage , The browser page will jump to Baidu home page at the same time , At the same time, the command line outputs the response and request information .

2、 Asynchronous command

Open the command line , Input python -m asyncio

Enter into Python In interactive mode , Enter the following command ：

from playwright.async_api import async_playwright
playwright = await async_playwright().start()
browser = await playwright.chromium.launch(headless=False)
page = await browser.new_page()
await page.goto("https://www.baidu.com/")
await browser.close()
await playwright.stop()

Copy

Enter the command to visit Baidu homepage , The browser page will also jump to Baidu homepage , The command line will also output response and request information .

5、 Recording mode

Playwright With command line tools （ Recording function ）, It can be used to record user interactions and generate code （Java、Python etc. ）. In fact, it is similar to Selenium IDE.

1、 General recording

Open the command line , Input

playwright codegen baidu.com

Copy

Open browser automatically , And jump to Baidu homepage .

At the same time, the recording window also pops up , You can see that it is recording , The scripting language is Python.

By manipulating the （ Click on 、 Input, etc ） Browser page , The script will also automatically add operation steps .

Besides , The recording tool can also get the location of elements . Click stop recording , Then click Explore after , Click the element you want to locate on the page , You can get the value of the element location .

Finally, copy the recorded script , It can be adjusted appropriately .

Adjusted script code ：

#!/usr/bin/env python
# -*- coding: utf-8 -*-
#  official account ：AllTests software test 

from playwright.sync_api import Playwright, sync_playwright, expect

def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()

    # Open new page
    page = context.new_page()

    # Go to https://www.baidu.com/
    page.goto("https://www.baidu.com/")

    # Click input[name="wd"]
    page.locator("input[name=\"wd\"]").click()

    # Fill input[name="wd"]
    page.locator("input[name=\"wd\"]").fill(" automated testing ")

    # Click text= use Baidu Search 
    page.locator("text= use Baidu Search ").click()

    # ---------------------
    context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

Copy

2、 Simulate mobile device recording

open It can simulate mobile devices and tablet devices

Simulation, for example iPhone 13 Visit the author's CSDN.

playwright open --device="iPhone 13" blog.csdn.net/wangmcn

Copy

Pictured ： simulation iPhone 13 The effect of opening the browser .

6、 Writing mode

Use IDE（ Such as PyCharm、Visual Studio Code etc. ） Write code and run programs .

1、 Launch the browser （ Headless mode ）

Playwright You can launch chromium、firefox、webkit Any kind of .

The example operation is as follows , Open the browser 、 Jump to Baidu 、 Screen capture 、 Output page title 、 Close the browser .

Script code ：

#!/usr/bin/env python
# -*- coding: utf-8 -*-
#  official account ：AllTests software test 

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("https://www.baidu.com/")
    page.screenshot(path="example.png")
    print(page.title())
    browser.close()

Copy

Running results ： Console output page title .

2、 Launch the browser （ Head mode ）

By default ,Playwright Run the browser in headless mode . To view the browser UI（ Head mode ）, Please pass it when you start the browser headless=False sign , You can also use slow_mo To slow down execution .

Script code ：

#!/usr/bin/env python
# -*- coding: utf-8 -*-
#  official account ：AllTests software test 

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False, slow_mo=50)
    page = browser.new_page()
    page.goto("https://www.baidu.com/")
    page.screenshot(path="example.png")
    print(page.title())
    browser.close()

Copy

3、 asynchronous

Playwright Support API Two variants of ： Synchronous and asynchronous .

Asynchronous Support , If your project uses asyncio, Should be used async API.

Script code ：

#!/usr/bin/env python
# -*- coding: utf-8 -*-
#  official account ：AllTests software test 

import asyncio
from playwright.async_api import async_playwright

async def main():
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page()
        await page.goto("https://www.baidu.com/")
        print(await page.title())
        await browser.close()

asyncio.run(main())

Copy