Playwright \u662f\u4e00\u6b3e\u7528\u4e8e\u81ea\u52a8\u5316\u6d4b\u8bd5\u548c\u722c\u866b\u7684 Node.js \u5e93\u3002\u5b83\u5185\u7f6e\u4e86 Chromium\u3001Firefox \u548c WebKit \u4e09\u79cd\u6d4f\u89c8\u5668\uff0c\u652f\u6301\u8de8\u5e73\u53f0\uff0c\u53ef\u7528\u4e8e\u6d4b\u8bd5\u548c\u722c\u866b\u7b49\u591a\u4e2a\u9886\u57df\u3002Playwright \u8fd8\u63d0\u4f9b\u4e86\u4e00\u4e9b\u975e\u5e38\u5b9e\u7528\u7684\u529f\u80fd\uff0c\u6bd4\u5982\u81ea\u52a8\u622a\u56fe\u3001\u81ea\u52a8\u586b\u5145\u8868\u5355\u3001\u6a21\u62df\u952e\u76d8\u8f93\u5165\u7b49\u3002<\/p>\n
\u5728\u4f7f\u7528 Playwright \u8fdb\u884c\u81ea\u52a8\u5316\u6d4b\u8bd5\u6216\u722c\u866b\u65f6\uff0c\u6211\u4eec\u901a\u5e38\u9700\u8981\u5c06\u4ee3\u7801\u6253\u5305\u6210\u53ef\u6267\u884c\u6587\u4ef6\uff0c\u4ee5\u4fbf\u5728\u5176\u4ed6\u673a\u5668\u4e0a\u8fd0\u884c\u3002\u672c\u6587\u5c06\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528 Electron \u548c pkg \u5de5\u5177\u5c06 Playwright \u4ee3\u7801\u6253\u5305\u6210\u53ef\u6267\u884c\u6587\u4ef6\u3002<\/p>\n
## Electron \u7b80\u4ecb<\/p>\n
Electron \u662f\u4e00\u6b3e\u8de8\u5e73\u53f0\u684c\u9762\u5e94\u7528\u7a0b\u5e8f\u5f00\u53d1\u6846\u67b6\uff0c\u57fa\u4e8e Chromium \u548c Node.js\u3002\u5b83\u80fd\u591f\u8ba9\u5f00\u53d1\u8005\u4f7f\u7528 Web \u6280\u672f\uff08HTML\u3001CSS \u548c JavaScript\uff09\u5f00\u53d1\u684c\u9762\u5e94\u7528\u7a0b\u5e8f\u3002Electron \u672c\u8d28\u4e0a\u662f\u4e00\u4e2a Node.js \u5e94\u7528\u7a0b\u5e8f\uff0c\u5b83\u8fd0\u884c\u5728\u4e00\u4e2a\u9690\u85cf\u7684 Chromium \u5b9e\u4f8b\u4e2d\uff0c\u53ef\u4ee5\u76f4\u63a5\u8bbf\u95ee\u64cd\u4f5c\u7cfb\u7edf\u7684\u5e95\u5c42 API\u3002<\/p>\n
Electron \u7684\u4e3b\u8981\u4f18\u70b9\u662f\u8de8\u5e73\u53f0\uff0c\u5f00\u53d1\u8005\u53ea\u9700\u8981\u7f16\u5199\u4e00\u5957\u4ee3\u7801\uff0c\u5c31\u53ef\u4ee5\u540c\u65f6\u5728 Windows\u3001Mac \u548c Linux \u4e0a\u8fd0\u884c\u3002\u6b64\u5916\uff0cElectron \u8fd8\u63d0\u4f9b\u4e86\u4e00\u4e9b\u5b9e\u7528\u7684\u529f\u80fd\uff0c\u6bd4\u5982\u81ea\u52a8\u66f4\u65b0\u3001\u83dc\u5355\u680f\u3001\u5bf9\u8bdd\u6846\u7b49\u3002<\/p>\n
## pkg \u7b80\u4ecb<\/p>\n
pkg \u662f\u4e00\u6b3e\u7528\u4e8e\u5c06 Node.js \u5e94\u7528\u7a0b\u5e8f\u6253\u5305\u6210\u53ef\u6267\u884c\u6587\u4ef6\u7684\u5de5\u5177\u3002\u5b83\u652f\u6301\u5c06\u5e94\u7528\u7a0b\u5e8f\u6253\u5305\u6210 Windows\u3001Mac \u548c Linux \u7684\u53ef\u6267\u884c\u6587\u4ef6\uff0c\u65e0\u9700\u5b89\u88c5 Node.js \u6216\u5176\u4ed6\u4f9d\u8d56\u9879\u3002pkg \u8fd8\u63d0\u4f9b\u4e86\u4e00\u4e9b\u9ad8\u7ea7\u529f\u80fd\uff0c\u6bd4\u5982\u4ee3\u7801\u6df7\u6dc6\u3001\u52a0\u5bc6\u7b49\u3002<\/p>\n
## \u6253\u5305\u6b65\u9aa4<\/p>\n
\u4e0b\u9762\u4ecb\u7ecd\u5c06 Playwright \u4ee3\u7801\u6253\u5305\u6210\u53ef\u6267\u884c\u6587\u4ef6\u7684\u6b65\u9aa4\uff1a<\/p>\n
### 1. \u5b89\u88c5 Electron \u548c pkg<\/p>\n
\u9996\u5148\uff0c\u9700\u8981\u5b89\u88c5 Electron \u548c pkg\u3002\u53ef\u4ee5\u901a\u8fc7 npm \u8fdb\u884c\u5b89\u88c5\uff1a<\/p>\n
“`<\/p>\n
npm install electron pkg –save-dev<\/p>\n
“`<\/p>\n
### 2. \u521b\u5efa\u4e3b\u8fdb\u7a0b\u6587\u4ef6<\/p>\n
\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a main.js \u7684\u6587\u4ef6\uff0c\u4f5c\u4e3a Electron \u7684\u4e3b\u8fdb\u7a0b\u6587\u4ef6\u3002\u4e3b\u8fdb\u7a0b\u6587\u4ef6\u8d1f\u8d23\u521b\u5efa\u7a97\u53e3\u3001\u52a0\u8f7d\u9875\u9762\u3001\u5904\u7406\u4e8b\u4ef6\u7b49\u3002<\/p>\n
\u4ee5\u4e0b\u662f\u4e00\u4e2a\u7b80\u5355\u7684 main.js \u6587\u4ef6\u793a\u4f8b\uff1a<\/p>\n
“`<\/p>\n
const { app, BrowserWindow } = require(‘electron’)<\/p>\n
function createWindow() {<\/p>\n
const win = new BrowserWindow({<\/p>\n
width: 800,<\/p>\n
height: 600,<\/p>\n
webPreferences: {<\/p>\n
nodeIntegration: true<\/p>\n
}<\/p>\n
})<\/p>\n
win.loadFile(‘index.html’)<\/p>\n
}<\/p>\n
app.whenReady().then(() => {<\/p>\n
createWindow()<\/p>\n
app.on(‘activate’, () => {<\/p>\n
if (BrowserWindow.getAllWindows().length === 0) {<\/p>\n
createWindow()<\/p>\n
}<\/p>\n
})<\/p>\n
})<\/p>\n
app.on(‘window-all-closed’, () => {<\/p>\n
if (process.platform !== ‘darwin’) {<\/p>\n
app.quit()<\/p>\n
}<\/p>\n