Jest and Playwright：前往 youtube.com 并搜索视频

Question

为了我的工作，我被指派为我们开发的 webapp 进行自动化测试。我必须用 Playwright 和 jest 编写自动化脚本。为了练习使用 Playwright，我决定制作一个脚本，在 YouTube 的搜索栏中查找“Israel Adesanya”。我的 JavaScript 有点新手，但是为了解决这个问题，我使用了 yarn add playwright 和 yarn add jest 目录结构，如下所示：

node_modules/
package.json
__tests__/
yarn-error.log
yarn.lock

我的package.json:

{
  "dependencies": {
    "jest": "^26.5.3",
    "playwright": "^1.5.1"
  },
  "scripts": {
    "test": "jest"
  }
}

在我的 __tests__ 目录中，我有一个名为 playwright_test.js 的文件，其中包含以下代码：

const { chromium } = require('playwright');
let browser;
let page;

beforeAll(async () => {
  browser = await chromium.launch({headless: false});
});

afterAll(async () => {
  await browser.close();
});

beforeEach(async () => {
  page = await browser.newPage();
});

afterEach(async () => {
  await page.close();
});

it('should work', async () => {
  //expect(await page.title()).toBe('YouTube');
  await page.fill('#search', 'Israel Adesanya')
  await page.click('button#search-icon-legacy')
}, 30000);

当我执行 yarn test 时，此代码仅将我带到 YouTube 页面，但在返回此错误之前没有执行任何其他操作：

我想知道如何才能在 YouTube 上正确搜索视频。作为奖励，在 YouTube 上搜索“Israel Adesanya”后，如何让脚本点击 YouTube 上的第一个视频？

Answer 1

我能告诉你的就这么多...

window.location.href = document.querySelector("#thumbnail").href;

将点击导航到（a 属性）中第一个 Youtube 视频的 href。

Answer 2

问题是有一个带有 ID search

的 SVG 图标

您应该能够使用选择器 #search-input input:

进入输入

Answer 3

我知道怎么做了。在我的 playwright_test.js 文件中现在如下：

const { chromium } = require('playwright');
let browser;
let page;

beforeAll(async () => {
  browser = await chromium.launch({headless: false});
});

afterAll(async () => {
  await browser.close();
});

beforeEach(async () => {
  page = await browser.newPage();
});

afterEach(async () => {
  await page.close();
});

it('should work', async () => {
  await page.goto('https://www.youtube.com');
  //expect(await page.title()).toBe('YouTube');
  await page.type('input#search', 'Israel Adesanya')
  await page.click('button#search-icon-legacy')
  await page.click('a#video-title')
  await page.waitForSelector('#search', { state: 'attached' });
  await page.waitForLoadState("networkidle")
}, 30000);

Jest and Playwright：前往 youtube.com 并搜索视频

Jest and Playwright: Go to youtube.com and search a video

javascript

node.js

jestjs

webautomation

playwright