laywright庫--->自動寫爬蟲代碼

Playwright--中文網

新一代爬蟲利器Playwright——自動寫代碼

Playwright快速上手指南

Playwright是由微軟公司2020年初發布的新一代自動化測試工具，相較于目前最常用的Selenium，它僅用一個API即可自動執行Chromium、Firefox、WebKit等主流瀏覽器自動化操作。作為針對 Python 語言純自動化的工具，在回歸測試中可更快的實現自動化。

介紹了 Playwright 的用法和部分 api，抓取一個網站主要的操作就是獲取 url 地址、參考 post 數據、

request、response、元素，本篇文章都有涉及。還有大量的 api 可以參考官方網站。

1. 用Python安裝使用Playwright

前提：需要 Python 3.7 或更高版本;需要安裝hromium、Firefox、WebKit等瀏覽器和playwright第三方模塊。

pip方式:

pip install --upgrade pip pip install playwright playwright install

conda方式：

conda config --add channels conda-forge conda config --add channels microsoft conda install playwright

playwright install

這些命令下載 Playwright 包并為 Chromium、Firefox 和 WebKit 安裝瀏覽器二進制文件。

安裝后，您可以import在Python腳本中進行Playwright，并啟動 3 個瀏覽器(chromium、firefox、webkit) 中的任何一個。代碼如下：

from playwright.sync_api import sync_playwright

with sync_playwright() as p: browser = p.chromium.launch() page = browser.new_page()

page.goto("http://playwright.dev") print(page.title()) browser.close()

默認情況下，Playwright以無頭模式運行瀏覽器。要查看瀏覽器 UI，請在啟動瀏覽器時傳遞

headless=False 標志。您還可以使用 slow_mo 來減慢執行速度。在調試工具部分了解更多信息。

firefox.launch(headless=False, slow_mo=50)

1. 錄制腳本

命令行工具可用于記錄用戶交互并生成 Python 代碼

playwright codegen myie9.com

playwright 在抓取頁面的時候是不需要太多寫代碼的，錄制就完事了。首先看看有哪些命令參數：

python -m playwright codegen --help

open page and generate code for user actions

Options:

-o, --output <file name> 將生成的腳本保存到文件

--target <language> 要生成的語言javascript、 test、python、python-async, c#(默認:"python")

-b, --browser <browserType> 要使用的瀏覽器,cr、chromium、ff、firefox、wk、webkit (默認: "chromium"

--channel <channel> Chromium 分發渠道, "chrome"、"chrome-beta"、 "msedge-dev"等

--color-scheme <scheme> 模擬首選配色方案, "light" or "dark"

--device <deviceName> 模擬設備, 如 "iPhone 11"

--geolocation <coordinates> 指定地理位置坐標, 如 "37.819722,-122.478611"

--ignore-https-errors 忽略http錯誤

--load-storage <filename> 從文件中加載上下文存儲狀態, 之前用with --save-storage格式保存的文件

--lang <language> 指定語言/區域設置，如"en-GB"

--proxy-server <proxy> 指定代理服務器，例如 "http://myproxy:3128" 或 "socks5://myproxy:8080"

--proxy-bypass <bypass> 逗號分隔的域名來繞過代理，例如“ .com，chromium.org，. domain. com”

--save-storage <filename> 將上下文存儲狀態保存在最后, 為以后'with --load-storage'備用

--save-trace <filename> 記錄會話的跟蹤并將其保存到文件中

--timezone <time zone> 時區模仿，例如“Europe/Rome"

--timeout <timeout> 以毫秒為單位輸出playright運行時間(default: "10000")

--user-agent <ua string> 指 定 user agent string

--viewport-size <size> 以像素為單位指定瀏覽器 viewport size，例如“1280,720”

-h, --help 顯示命令的幫助

Examples:

$ codege

$ codegen --target=python

$ codegen -b webkit https://example.com

實例過程：

headless代碼

python -m playwright codegen -o D:\playwright_demo.py

注：將腳本文件存放在 D 盤的 playwright_demo.py （代碼如下）中。

from playwright.sync_api import Playwright, sync_playwright

def run(playwright: Playwright) -> None:

browser = playwright.chromium.launch(headless=False) context = browser.new_context()

# Open new page

page = context.new_page()

# Close page page.close()

# context.close() browser.close()

with sync_playwright() as playwright: run(playwright)

其中： browser=playwright.chromium.launch(headless=False)

headless 是 False 的時候會出現瀏覽器，如果是 True 就以沒有瀏覽器的方式啟動。

• page參數

Page就是單獨的一個瀏覽器 tab 標簽（第一種）創建

也可以是 a 標簽中 target="_blank" 打開的 tab 標簽（第二種）創建。

page = context.new_page() # 第一種方法

page.goto("https://www.jd.com/")

with page.expect_popup() as popup_info: # 第二種方法

page click("[aria-label=\"OPPO A96 8+256GB 琉璃幻彩 小星環 呼吸燈 高通八核5G芯片 33W快充 OLED

page3 = popup_info.value

page3.wait_for_load_state() print(page3.title())

page方法

page 有多個常用的方法：on、goto、fill、inner_html、content、query_selector、query_selector_all 等等

goto():用于跳轉網址

on():事件的監聽，可以用來監聽瀏覽器中發生的任何事件，如：close、console、download、request、response 等等。

用來監聽 request 請求，打印出 post 的提交數據和請求地址：

def on_request(request):

print(' start ') print(request.url) print(request.post_data) print(' start ')

def run(playwright: Playwright) -> None:

browser = playwright.chromium.launch(headless=False) context = browser.new_context()

page = context.new_page() # Open new page page.on('request', on_request) page.goto("https://www.baidu.com/") context.close()

browser.close()

用來監聽 response 響應，并打印出百度中的 png 結尾的圖片：

from playwright.sync_api import Playwright, sync_playwright import time

def on_response(response):

if '.png' in response.url:

with open('D:\image\'+str(int(time.time()))+ '.png', 'wb') as f: f.write(response.body())

def run(playwright: Playwright) -> None:

browser = playwright.chromium.launch(headless=False) context = browser.new_context()

page = context.new_page() # Open new page page.on('response', on_response) page.goto("https://www.baidu.com/")

context.close() browser.close()

fill() 用于填寫 input 框，在百度搜索框中寫入 111：

page.fill("input[name=\"wd\"]", "111")

inner_html()、content() 獲取頁面源代碼： page.inner_html('//html') page.content()

query_selector 選擇一個節點，當匹配到多個節點，只會返回第一個，獲取 class='toindex' 的文本：

handle = page.query_selector('.toindex') print(handle.text_content())

query_selector_all 選擇所有的節點，獲取百度頁面上所有 input 的 name： handles = page.query_selector_all('input')

for item in handles:

print(item.get_attribute('name')

選擇器

Text選擇器

以jd網站為例：下面兩行可以選擇登錄或者注冊

page.click("text=你好，請登錄") `` page.click("text=免費注冊")

text=后面也可以寫正則表達式，比如：text=/Log\s*in/i 就可以匹配 Login 或者 log IN

如果不確定是否存在某個 text 也可以使用 :has-text('Log')

• CSS選擇器

CSS 選擇器就是使用的默認 CSS 引擎。

Playwright 也自定義了一些偽類：:visible、:text、:has 等等。用 id 的方式登錄到京東網站：

page.click('#loginsubmit')

根據節點的屬性選擇：

page.click('[awia-label="搜索"]')

根據CSS和子節點選擇

li、img是標簽，seckill_mod_googs_link_img是img的class值：

page.click('li:has(img.seckill_mod_goods_link_img)')

1. XPath

Playwright 支持 XPath 選擇元素，自動化錄制 python 腳本一般是使用的 text 而不是 Xpath。

page.click("//span[contains(@class, 'spinner loading')]|//div[@id='confirmation']")

1. N-th

N-th >選擇第幾個：

點擊第一個按鈕：

page.click("button >> nth=0")

點擊最后一個按鈕：

page.click("button >> nth=-1")

如何避免el-form中el-input輸入框回車鍵導致頁面刷新的痛點問題

## 引言：問題起源與影響

在使用Element UI進行Web前端開發時，我們經常遇到一個常見的痛點問題：在`el-form`組件中的`el-input`輸入框內按回車鍵時，頁面會意外地刷新，這并非預期行為，尤其是在表單填寫場景下，用戶希望的是提交表單而非刷新整個頁面。本文將深入探討這個問題，并給出詳盡的解決方案。

### 段落一：問題現象剖析

問題重現

html
<el-form>
  <el-form-item label="用戶名">
    <el-input v-model="username"></el-input>
  </el-form-item>
  <!-- 其他表單元素... -->
</el-form>

在上述代碼中，當我們在`el-input`中輸入內容并按下回車鍵時，頁面會發生刷新，這主要是因為瀏覽器默認對`<form>`標簽或可輸入元素（如`<input>`）的回車鍵事件處理為提交表單，而提交操作通常會導致頁面刷新。

### 段落二：解決思路與方法

阻止默認行為

要解決此問題，我們可以采用兩種主要策略：

1.

阻止回車鍵默認提交行為

javascript
export default {
  methods: {
    preventFormSubmit(e) {
      if (e.keyCode === 13) { // keyCode 13代表回車鍵
        e.preventDefault(); // 阻止默認提交動作
        // 這里可以添加自定義的回車鍵觸發邏輯，例如提交表單
      }
    }
  },
  mounted() {
    document.addEventListener('keydown', this.preventFormSubmit);
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.preventFormSubmit);
  }
}

2.

局部處理el-input回車事件

html
<el-form @submit.prevent>
  <el-form-item label="用戶名">
    <el-input v-model="username" @keyup.enter.native.prevent></el-input>
  </el-form-item>
  <!-- 其他表單元素... -->
</el-form>

在上述代碼中，`.native`修飾符用于監聽原生DOM事件，`@keyup.enter.prevent`表示監聽輸入框的回車鍵按下事件并阻止其默認行為。

自定義回車鍵功能

javascript
// 在main.js或者其他全局引入的文件中
Vue.directive('prevent-form-submit', {
  inserted(el, binding, vnode) {
    el.addEventListener('keydown', (e) => {
      if (e.target.tagName === 'INPUT' && e.keyCode === 13) {
        e.preventDefault();
        const form = vnode.context.$refs[binding.value];
        if (form && typeof form.validate === 'function') {
          form.validate((valid) => {
            if (valid) {
              // 觸發表單提交邏輯
              form.submit();
            }
          });
        }
      }
    });
  }
});

// 在模板中應用全局指令
<el-form ref="myForm" @submit.prevent v-prevent-form-submit="'myForm'">
  <!-- 表單元素... -->
</el-form>

總結起來，解決`el-form`中`el-input`回車鍵導致頁面刷新的問題，關鍵在于理解和利用Vue事件系統以及原生DOM事件的處理機制，通過適當的事件監聽和阻止默認行為，我們可以輕松定制回車鍵的行為，提升用戶體驗，同時避免了不必要的頁面刷新。希望本篇文章能幫助開發者更好地掌握這一技巧，并應用于實際項目中。