详解playwright 官方Javascript demo（适合小白）

如果大家刚上手playwright，并看到了Javascript脚本的官方demo，代码如下：

const { webkit } = require('playwright');

(async () => {
  const browser = await webkit.launch();
  const page = await browser.newPage();
  await page.goto('http://whatsmyuseragent.org/');
  await page.screenshot({ path: `example.png` });
  await browser.close();
})();

看到这里很多初涉playwright and 只是简单了解js语法的小伙伴，可能会感到很不爽，因为完全不懂这段js代码的含义，本文我就带大家详细梳理上述js语法的使用细节！！

使用require进行引入

在JavaScript的解构赋值中，花括号 {} 用于指定要从模块或对象中提取哪些属性。对于 const { webkit } = require('playwright'); 这句代码表示只引用webkit这一部分。
如果去掉花括号，会得到一个指向整个playwright模块的引用。执行脚本将会报错：TypeError: webkit.launch is not a function

在下面这个例子中
const { chromium, firefox, webkit } = require('playwright');

我们可以同时从playwright模块中提取了chromium、firefox和webkit，并将它们分别赋值给了三个不同的常量

异步的箭头函数

(async () => { ... }): 这部分定义了一个异步的箭头函数。
(): 这部分立即执行了上面定义的箭头函数。
由于这是一个异步操作，使用 async/await 可以确保这些操作按预期顺序执行，而不会阻塞主线程。

playwright api分析

整个代码的解释如下：
使用 webkit.launch() 启动一个浏览器实例。
使用 browser.newPage() 创建一个新的浏览器页面。
使用 page.goto() 导航到指定的 URL。
使用 page.screenshot() 为页面截图并保存到本地。
最后，使用 browser.close() 关闭浏览器实例。

我的每一篇文章都希望帮助读者解决实际工作中遇到的问题！如果文章帮到了您，劳烦点赞、收藏、转发！您的鼓励是我不断更新文章最大的动力！