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

Question

for my job, I have been assigned to automate tests for a webapp that we developed. I have to write the automation scripts with Playwright and jest. In order to practice using Playwright, I have decided to make a script that looks up "Israel Adesanya" on the search bar in YouTube. My JavaScript is a bit inexperienced, but in order to work on this, I used yarn add playwright and yarn add jest directory structure looks like the following:

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

my package.json:

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

in my __tests__ directory, I have a file titled playwright_test.js with the following code:

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);

When I do yarn test, this code only brings me to the YouTube page, but does nothing else before returning this error:

I was wondering what I do in order to be able to properly search a video on YouTube. For a bonus, after searching "Israel Adesanya" on YouTube, how do I make the script click the first video on YouTube?

Answer 1

I found out how to do it. In my playwright_test.js file is now the following:

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 2

This much I could tell you...

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

will click navigate to the first Youtube video's href in the (a attribute).

Answer 3

The problem is that there is an SVG icon with the ID search

You should be able to get to the input with the selector #search-input input: