Шутка и драматург: перейдите к youtube.com и выполните поиск по видео

#javascript #node.js #jestjs #webautomation #playwright

#javascript #node.js #jestjs #веб-автоматизация #драматург

Вопрос:

для моей работы мне было поручено автоматизировать тесты для веб-приложения, которое мы разработали. Я должен написать сценарии автоматизации с помощью Playwright и jest. Чтобы попрактиковаться в использовании Playwright, я решил создать скрипт, который ищет «Israel Adesanya» в строке поиска на 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. В качестве бонуса, после поиска «Israel Adesanya» на YouTube, как мне заставить скрипт щелкнуть первое видео на YouTube?

Ответ №1:

Это все, что я мог бы вам рассказать…

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

щелкните по ссылке на первое видео Youtube в атрибуте (a).

Ответ №2:

Проблема в том, что есть значок SVG с ID search

введите описание изображения здесь

Вы должны иметь возможность перейти к вводу с помощью селектора #search-input input :

введите описание изображения здесь

Ответ №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);