HoRain 云小助手个人主页⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。点击跳转到网站。目录⛳️ 推荐编写你的第一个脚本实例脚本运行调试模式查看运行结果在编写代码之前理解 Playwright 的核心概念至关重要最核心的三个对象是 Browser、BrowserContext 和 Page这三个对象构成了你与网页交互的基础Browser浏览器这是自动化过程的起点。一个Browser实例代表了一个实际的浏览器例如 Chromium、Firefox 或 WebKit。你可以启动一个浏览器然后在其内部创建多个独立的会话。BrowserContext浏览器上下文一个BrowserContext就像一个独立的浏览器会话。它完全隔离了页面、本地存储、cookies 等数据。这使得你可以在一个浏览器中同时运行多个互不影响的自动化任务就像你在隐身模式下打开了多个标签页一样。Page页面Page是你进行实际操作的地方。它代表了浏览器上下文中的一个标签页或窗口。所有的操作如点击、输入、导航、截图等都是在Page对象上执行的。三者之间的关系一个Browser可以包含多个BrowserContext而一个BrowserContext可以包含多个Page。通常我们只需要一个Browser和一个BrowserContext但在某些需要隔离数据的场景下BrowserContext就显得非常有用。编写你的第一个脚本接下来我们将编写一个简单的脚本它会启动浏览器访问百度然后截取一张图片。创建一个名为baidu_script.js的文件并粘贴以下代码实例const { chromium } require(playwright);(async () {// 启动浏览器并创建一个新的浏览器上下文。const browser await chromium.launch({ headless: false }); // headless: false 会显示浏览器窗口const context await browser.newContext();const page await context.newPage();// 导航到你想要访问的网站。await page.goto(https://www.baidu.com);// 在搜索框中输入文本。await page.fill(#kw, Playwright);// 按下回车键或点击搜索按钮。await page.press(#kw, Enter);// 等待导航完成这很重要以确保页面加载完毕。await page.waitForNavigation();// 截图并保存。await page.screenshot({ path: baidu_search_results.png });// 打印当前页面的标题。console.log(页面标题是: ${await page.title()});// 关闭浏览器。await browser.close();})();代码详解const { chromium } require(playwright);从 Playwright 库中导入chromium模块。你可以根据需要替换为firefox或webkit。await chromium.launch({ headless: false });启动一个 Chromium 浏览器实例。headless: false是一个关键选项它会显示浏览器窗口让你能看到脚本的执行过程。await browser.newContext();和await context.newPage();这三行代码组合起来就是打开了一个新的浏览器标签页。await page.goto(https://www.baidu.com);导航到指定的 URL。这是最常用的方法之一。await page.screenshot({ path: baidu_homepage.png });截取当前页面的截图并将其保存到文件中。await browser.close();关闭浏览器释放系统资源。脚本运行打开终端或命令提示符进入你的项目目录然后执行以下命令node baidu_script.js执行后你会看到一个浏览器窗口自动打开加载百度首页然后窗口关闭。在你的项目文件夹中会生成一个名为baidu_homepage.png的截图文件。调试模式在编写更复杂的脚本时你可能需要调试。Playwright 提供了一个强大的调试工具我们只需在运行脚本时在命令行前添加PWDEBUG1PWDEBUG1 node baidu_script.js运行后你会看到一个 Playwright 调试窗口可以逐步执行代码检查页面元素并实时看到脚本的每一步操作这对于定位问题非常有帮助。查看运行结果除了命令行输出和截图文件你还可以通过以下方式检查脚本的运行结果console.log()在脚本中加入console.log()语句可以打印变量的值或确认某个步骤是否执行。截图利用page.screenshot()功能在关键步骤保存截图可以直观地看到页面的状态。文件操作你可以将抓取到的数据写入本地文件以便后续分析。❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧
HoRain云--Playwright 第一个脚本
HoRain 云小助手个人主页⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。点击跳转到网站。目录⛳️ 推荐编写你的第一个脚本实例脚本运行调试模式查看运行结果在编写代码之前理解 Playwright 的核心概念至关重要最核心的三个对象是 Browser、BrowserContext 和 Page这三个对象构成了你与网页交互的基础Browser浏览器这是自动化过程的起点。一个Browser实例代表了一个实际的浏览器例如 Chromium、Firefox 或 WebKit。你可以启动一个浏览器然后在其内部创建多个独立的会话。BrowserContext浏览器上下文一个BrowserContext就像一个独立的浏览器会话。它完全隔离了页面、本地存储、cookies 等数据。这使得你可以在一个浏览器中同时运行多个互不影响的自动化任务就像你在隐身模式下打开了多个标签页一样。Page页面Page是你进行实际操作的地方。它代表了浏览器上下文中的一个标签页或窗口。所有的操作如点击、输入、导航、截图等都是在Page对象上执行的。三者之间的关系一个Browser可以包含多个BrowserContext而一个BrowserContext可以包含多个Page。通常我们只需要一个Browser和一个BrowserContext但在某些需要隔离数据的场景下BrowserContext就显得非常有用。编写你的第一个脚本接下来我们将编写一个简单的脚本它会启动浏览器访问百度然后截取一张图片。创建一个名为baidu_script.js的文件并粘贴以下代码实例const { chromium } require(playwright);(async () {// 启动浏览器并创建一个新的浏览器上下文。const browser await chromium.launch({ headless: false }); // headless: false 会显示浏览器窗口const context await browser.newContext();const page await context.newPage();// 导航到你想要访问的网站。await page.goto(https://www.baidu.com);// 在搜索框中输入文本。await page.fill(#kw, Playwright);// 按下回车键或点击搜索按钮。await page.press(#kw, Enter);// 等待导航完成这很重要以确保页面加载完毕。await page.waitForNavigation();// 截图并保存。await page.screenshot({ path: baidu_search_results.png });// 打印当前页面的标题。console.log(页面标题是: ${await page.title()});// 关闭浏览器。await browser.close();})();代码详解const { chromium } require(playwright);从 Playwright 库中导入chromium模块。你可以根据需要替换为firefox或webkit。await chromium.launch({ headless: false });启动一个 Chromium 浏览器实例。headless: false是一个关键选项它会显示浏览器窗口让你能看到脚本的执行过程。await browser.newContext();和await context.newPage();这三行代码组合起来就是打开了一个新的浏览器标签页。await page.goto(https://www.baidu.com);导航到指定的 URL。这是最常用的方法之一。await page.screenshot({ path: baidu_homepage.png });截取当前页面的截图并将其保存到文件中。await browser.close();关闭浏览器释放系统资源。脚本运行打开终端或命令提示符进入你的项目目录然后执行以下命令node baidu_script.js执行后你会看到一个浏览器窗口自动打开加载百度首页然后窗口关闭。在你的项目文件夹中会生成一个名为baidu_homepage.png的截图文件。调试模式在编写更复杂的脚本时你可能需要调试。Playwright 提供了一个强大的调试工具我们只需在运行脚本时在命令行前添加PWDEBUG1PWDEBUG1 node baidu_script.js运行后你会看到一个 Playwright 调试窗口可以逐步执行代码检查页面元素并实时看到脚本的每一步操作这对于定位问题非常有帮助。查看运行结果除了命令行输出和截图文件你还可以通过以下方式检查脚本的运行结果console.log()在脚本中加入console.log()语句可以打印变量的值或确认某个步骤是否执行。截图利用page.screenshot()功能在关键步骤保存截图可以直观地看到页面的状态。文件操作你可以将抓取到的数据写入本地文件以便后续分析。❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧
