javascript - Jest and Playwright：访问 youtube.com 并搜索视频

Question

对于我的工作，我被指派为我们开发的 web 应用程序进行自动化测试。我必须用 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

问题是有一个 SVG 图标ID search

您应该能够使用选择器进入输入#search-input input：

Answer 2

我发现了如何做到这一点。在我的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);

Answer 3

我可以告诉你的就这么多...

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

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