Jest and Playwright：转到youtube.com并搜索视频

问题描述

在我的工作中，我被分配为我们开发的Web应用程序自动化测试。我必须用Playwright和jest来编写自动化脚本。为了练习使用Playwright，我决定制作一个脚本在YouTube的搜索栏中查找“以色列阿德桑亚”。我的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上搜索“以色列阿德桑亚”后，如何使脚本单击YouTube上的第一个视频？

解决方法

我能告诉你很多...

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

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

,

问题是存在带有const imgUrl = 'http://stackoverflow.com/logo.jpg' ID

的SVG图标

您应该可以使用选择器search来输入：

,

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