1. 主流框架的認(rèn)識(shí)

總結(jié)：

• 由于Selenium在3.x和4.x兩個(gè)版本的迭代中并沒有發(fā)生多大的變化，因此Selenium一統(tǒng)天下的地位可能因新框架的出現(xiàn)而變得不那么穩(wěn)固。
• 后續(xù)的Cypress、TestCafe、Puppeteer被譽(yù)為后Selenium時(shí)代Web UI自動(dòng)化的三駕馬車。但是由于這三個(gè)框架都是基于JavaScript開發(fā)的，且都不支持Python，所以使用率并沒有很高。
• playwright則是綜合了上述框架的優(yōu)點(diǎn)，提供了很好的體驗(yàn)，將來可能成為流行的趨勢(shì)。

2. Playwright認(rèn)識(shí)

Playwright簡(jiǎn)介：

• 2020年，微軟（Microsoft）開源了一個(gè)名為Playwright的工具，與Selenium一樣入門簡(jiǎn)單，支持多語(yǔ)言（Python、Java、Node.js、.NET），支持多瀏覽器（Chromium、Firefox、Webkit）,可跨平臺(tái)（Windwos、Linux、Mac OS）
• Playwright同時(shí)支持接口自動(dòng)化和UI自動(dòng)化，為現(xiàn)代web應(yīng)用提供了可靠的端到端的測(cè)試能力。

Playwright優(yōu)勢(shì)：

• 1）自動(dòng)等待功能讓自動(dòng)化更可靠
• 2）自動(dòng)追蹤：可以很方便地配置重試策略，自動(dòng)的追蹤結(jié)果，以截圖和錄屏的方式進(jìn)行記錄。
• 3）斷言機(jī)制：會(huì)根據(jù)網(wǎng)絡(luò)環(huán)境進(jìn)行自動(dòng)斷言，直到滿足某種條件為止。
• 4）異步執(zhí)行：Playwright基于socket進(jìn)行雙向通訊，支持同步與異步執(zhí)行兩種方式
• 5）可運(yùn)行多頁(yè)仿真場(chǎng)景：Playwright是通過上下文管理瀏覽器，相當(dāng)于每一個(gè)測(cè)試用例都會(huì)創(chuàng)建一個(gè)獨(dú)立的上下文，瀏覽器的上下文其實(shí)就是一個(gè)全新的瀏覽器，這種方式的好處就是在提速的同時(shí)又實(shí)現(xiàn)測(cè)試與測(cè)試之間的隔離，使得測(cè)試結(jié)果更加準(zhǔn)確，所以可以實(shí)現(xiàn)并行執(zhí)行。
• 6）強(qiáng)大的工具集：還我們提供了強(qiáng)大的工具集，例如：腳本錄制工具codegen、腳本編寫以及調(diào)試工具playwright等

3. Playwright環(huán)境搭建

Python環(huán)境：python解釋器+IDE工具，不知道怎么安裝的可參考： python3.4 + pycharm 環(huán)境安裝 + pycharm 使用

Playwright環(huán)境：

安裝Playwright：pip install playwright -i https://pypi.tuna.tsinghua.edu.cn/simple

安裝內(nèi)置瀏覽器(chromium,firefox,webkit)：playwright install

4. Playwright入門實(shí)戰(zhàn)

1）腳本錄制

案例1：實(shí)現(xiàn)Web ui自動(dòng)化，打開瀏覽器，訪問測(cè)試派，點(diǎn)擊登錄后在進(jìn)行登錄操作（輸入用戶名、密碼，點(diǎn)擊登錄按鈕）

操作步驟：

• 第一步：pycharm--Terminal中輸入命令：playwright codegen，會(huì)自動(dòng)打開瀏覽器和Playwright Inspector工具，Playwright Inspector工具自動(dòng)開啟錄制功能
• 第二步：在打開的瀏覽器中進(jìn)行相關(guān)的操作，如訪問地址、點(diǎn)擊或輸入操作
• 第三步：操作完成后，在Playwright Inspector中點(diǎn)擊Record停止錄制，然后復(fù)制代碼即可

from playwright.sync_api import Playwright, sync_playwright, expect

def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    page.goto("http://175.178.53.95:8081/")
    page.get_by_text("登錄").click()
    page.get_by_placeholder("用戶名/郵箱/手機(jī)號(hào)").click()
    page.get_by_placeholder("用戶名/郵箱/手機(jī)號(hào)").fill("kemi")
    page.get_by_placeholder("用戶名/郵箱/手機(jī)號(hào)").press("Tab")
    page.get_by_placeholder("密碼").fill("123456")
    page.pause()  # 斷點(diǎn)調(diào)試功能
    page.get_by_role("button", name="登錄").click()

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


with sync_playwright() as playwright:
    run(playwright)

2）錄制工具快速定位元素

如果我自己寫代碼，需要定位元素，通過Playwright Inspector工具的Pick locator可以快速獲取元素定位的信息，具體操作如下截圖：

Playwright支持兩大類元素定位方式，包括：

1）get_by方式

• get_by_id: 通過元素的 id 屬性來查找元素，例如：element = page.get_by_id("my-id")
• get_by_name: 通過元素的 name 屬性來查找元素，例如：element = page.get_by_name("my-name")
• get_by_text: 通過元素的文本內(nèi)容來查找元素，例如：element = page.get_by_text("Submit")
• get_by_title: 通過元素的 title 屬性來查找元素，例如：element = page.get_by_title("my-title")
• get_by_placeholder: 通過元素的 placeholder 屬性來查找元素，例如：element = page.get_by_placeholder("my-placeholder")
• get_by_selector: 通過 CSS 選擇器來查找元素，例如：element = page.get_by_selector("#submit-button")
• get_by_xpath: 通過 XPath 表達(dá)式來查找元素，例如：element = page.get_by_xpath("//div[@class='my-class']")
• get_by_label: 根據(jù)label屬性值查找元素，類似于HTML中的label標(biāo)簽和對(duì)應(yīng)的for屬性。
• get_by_role: 通過角色方式定位元素，例如：element = page.get_by_role("button", name="Submit")

2）page.locator方式

• 通過ID定位元素：使用page.locator("#element-id")或page.locator('id=element-id')定位。
• 通過CSS選擇器定位元素：使用page.locator("css=selector")定位。例如：element = page.locator("button#submit-button")
• 通過XPath表達(dá)式定位元素：使用page.locator("xpath=expression")定位。例如：element = page.locator("//button[@id='submit-button']")
• 通過名稱定位元素：使用page.locator("name=element-name")定位。
• 通過鏈接文本定位元素：使用page.locator("text=link-text")定位。
• 通過部分鏈接文本定位元素：使用page.locator("partial_text=partial-link-text")定位。
• 通過元素屬性定位元素：使用page.locator("[attribute=value]")定位。
• 通過標(biāo)簽名定位元素：使用page.locator("tag=tag-name")定位。

4. Pytest+Allure+Playwright完整項(xiàng)目演示

1）腳本轉(zhuǎn)為測(cè)試用例

案例需求：將上面測(cè)試派的登錄操作轉(zhuǎn)為測(cè)試用例

操作步驟：

• 第一步：pycharm--Terminal中輸入命令：playwright codegen，會(huì)自動(dòng)打開瀏覽器和Playwright Inspector工具，Playwright Inspector工具自動(dòng)開啟錄制功能
• 第二步：在打開的瀏覽器中進(jìn)行相關(guān)的操作，如訪問地址、點(diǎn)擊或輸入操作
• 第三步：操作完成后，在Playwright Inspector中點(diǎn)擊Record停止錄制
• 第四步：在Target中選擇Python下的pytest,就會(huì)自動(dòng)化將錄制的代碼轉(zhuǎn)為測(cè)試用例，然后復(fù)制代碼即可。具體操作如下截圖所示：

代碼如下：

from playwright.sync_api import Page, expect

def test_example(page: Page) -> None:
    page.goto("http://175.178.53.95:8081/")
    page.get_by_text("登錄").click()
    page.get_by_placeholder("用戶名/郵箱/手機(jī)號(hào)").click()
    page.get_by_placeholder("用戶名/郵箱/手機(jī)號(hào)").fill("kemi")
    page.get_by_placeholder("用戶名/郵箱/手機(jī)號(hào)").press("Tab")
    page.get_by_placeholder("密碼").fill("123456")
    page.get_by_role("button", name="登錄").click()

執(zhí)行用例前必須先安裝插件，否則會(huì)報(bào)錯(cuò)，因?yàn)橛美挥泻诵牡臉I(yè)務(wù)操作，沒有瀏覽器、上下文、頁(yè)面的初始化，裝了插件后會(huì)自動(dòng)做這些初始化的操作，從而執(zhí)行用例不會(huì)報(bào)錯(cuò)。命令：pip install pytest-playwright

2）數(shù)據(jù)驅(qū)動(dòng)

集合pytest的parametrize實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)

import pytest
from playwright.sync_api import Page, expect

# 測(cè)試用例數(shù)據(jù)
case_data = [{'caseid':1,'username':'kemi123', 'password':'kemi123'},
             {'caseid':2,'username':'zhangsan', 'password':'123456'},
             {'caseid':3,'username':'lisi', 'password':'123456'}]

# 數(shù)據(jù)驅(qū)動(dòng)
@pytest.mark.parametrize('case', case_data)
def test_example(page: Page,case) -> None:
    username = case['username']
    password = case['password']

    page.goto("http://175.178.53.95:8081/")
    page.get_by_text("登錄").click()
    page.get_by_placeholder("用戶名/郵箱/手機(jī)號(hào)").click()
    page.get_by_placeholder("用戶名/郵箱/手機(jī)號(hào)").fill(username)
    page.get_by_placeholder("用戶名/郵箱/手機(jī)號(hào)").press("Tab")
    page.get_by_placeholder("密碼").fill(password)
    page.get_by_role("button", name="登錄").click()
    page.screenshot(path=f"images/login/登錄{case['caseid']}.png")  # 截圖保存到指定位置

3）報(bào)告顯示

通過pytest執(zhí)行用例后，通過命令生成報(bào)告：allure serve outputs/allure，查看報(bào)告顯示，截圖如下：

到此這篇關(guān)于Playwright中Web自動(dòng)化測(cè)試的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Playwright Web自動(dòng)化測(cè)試內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論