browser - playwright的基本用法 - headless browser 无头浏览器

参考：
https://playwright.dev/docs/intro#manually

起因

我想要nftgo.io的数据

发现这是一帮杭州人做的。。。

然后找到了这个：   checklyhq , 用python脚本抓包的

https://www.checklyhq.com/learn/headless/request-interception/

其实这个正是我想要的

然后发现了 playwright

安装

（注意先进入到工作目录）

（可以先设置代理）npm config set https-proxy http://127.0.0.1:8075

npm i -D @playwright/test

npx playwright install

创建新的测试

注意：

1。 文件要以 .spec.js 结尾

2. 文件要放在 tests  目录下

sg552@SKYUSER-DSBR6H5:/workspace/playwright$ cat tests/example.spec.js
const { test, expect } = require('@playwright/test');

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const title = page.locator('.navbar__inner .navbar__title');
  await expect(title).toHaveText('Playwright');
});

运行

Running 1 test using 1 worker

  ok tests\example.spec.js:3:1 › basic test (15s)

  1 passed (16s)

会看到一个浏览器窗口弹出来，太NB了。

如何打开页面，等待页面加载？

如何保持页面的登录状态?

refer to:
https://stackoverflow.com/questions/63479708/maintain-login-session-after-first-browser-instance-in-playwright

如何只运行某个test 文件?

refer to:  https://playwright.dev/docs/running-tests#run-specific-tests

npx playwright some_test.js

如何只运行某个文件夹？

npx playwright folder1  folder2

如何获得某个child 元素？

refer to: https://playwright.dev/docs/locators#filter-by-childdescendant

或者： page.$$  

refer to: https://stackoverflow.com/questions/66702513/playwright-find-multiple-elements-or-class-names

如何根据文字获得element?

refer to: https://playwright.dev/docs/api/class-page#page-get-by-text

根据css selector 获得元素？

见下面代码

如何让页面等待？

refer to: https://stackoverflow.com/questions/69806337/how-to-pause-the-test-script-for-3-seconds-before-continue-running-it-playwrigh

page.waitForTimeout(3000) 

得，好多内容都没了。。。

直接来个代码例子吧：

const { test, expect } = require('@playwright/test');

test('basic test', async ({ page }) => {

  // 120s 超时时间
  test.setTimeout(120000)
  // 1. 登录
  let url = 'https://passport.damai.cn/login?ru=https%3A%2F%2Fwww.damai.cn%2F'
  await page.goto(url);

  console.info("== 为了演示，该页面停留 1s")
  await page.waitForTimeout(1000)
  await page.frameLocator('#alibaba-login-box').getByText("密码登录").click()
  await page.frameLocator('#alibaba-login-box').getByLabel('请输入手机号或邮箱').fill("13.....")
  await page.frameLocator('#alibaba-login-box').getByLabel('请输入登录密码').fill(".....")
  await page.frameLocator('#alibaba-login-box').getByRole('button', {name: '登录'}).click()

  await expect(page.getByText("首页")).toBeVisible()



  // 2. 不断地刷新页面
  let url2 = 'https://detail.damai.cn/item.htm?spm=a2oeg.search_category.0.0.1f6db885HF26ws&id=747858504463&clicktitle=%E2%80%9C%E7%BE%8E%E5%A5%BD%E7%9A%84%E6%97%B6%E5%85%89%E2%80%9D%E5%9B%BD%E5%AE%B6%E5%A4%A7%E5%89%A7%E9%99%A2%E5%90%88%E5%94%B1%E5%9B%A214%E5%91%A8%E5%B9%B4%E9%9F%B3%E4%B9%90%E4%BC%9A'
  await page.goto(url2)

  //page.waitForTimeout(10000)
  //await expect(page.locator('.select_right_list_item')).toBeVisible()

  //let target1 = page.$$('.select_right_list_item')
  console.info("== 为了演示，该页面停留 1s")
  await page.waitForTimeout(1000)

  let target1 = page.getByText('120.00元', { exact: true })
  console.info("=== target1: ", target1)
  await target1.click()

  //page.waitForTimeout(10000)
  // 3. 如果可以购买了，直接点击购买
  let start_to_buy = page.locator('.buy-link')
  await start_to_buy.click()
  console.info("== start_to_buy: ", start_to_buy)

  console.info("== 为了演示，该页面停留 5s")
  await page.waitForTimeout(5000)

  // 4. 购买之后，会自动跳转到这个路径：
  // https://m.damai.cn/app/dmfe/select-seat-biz/kylin.html?itemId=747858504463&userPromotion=true&toDxOrder=true&quickBuy=0&privilegeActId=&channel=damai_app&performId=212348031&skuId=5330323643730&projectId=218328001&rtc=0
  await page.getByText('120.00元').click()

  console.info("== 为了演示，该页面停留 1s, 准备点击票价了")
  // 下面是针对 需要选座的演唱会的 操作过程: 点击票价，点击座位，购买即可
  // 建议人工选座
  await page.waitForTimeout(1000)

  await page.locator('.select-seat__container').click({position: {x: 10, y:10}})

  console.info("== 为了演示，该页面停留 1s, 准备点击票价了")
  page.evaluate( () => {
    alert("请手动选择座位")
  })

  await page.waitForTimeout(100000)
});