Transcripted Summary
By the end of this video, you will be able to create a musical masterpiece using Playwright.
Let's try to create a musical masterpiece by clicking on these buttons using Playwright.
For example, if I do this, click on the C6 button. Can you hear that?
I will do it again. That is a musical note.
So how can we do this with Playwright?
Let's go back to Visual Studio Code.
First, we need to create a new node.js script. I'm going to name mine click.js.
And I'm going to copy the code from the first script that we created just to save some time again.
We want to change this because we're not navigating to Google. We're going to be navigating to this other web page.
And after this, we can click on the keynotes.
So how can we click here, C6?
Let's open the dev tools in order to retrieve our selector.
And I'm just going to go with the generic selector that is given by dev tools.
And after this, we just need to do await page.click() and inside here, it has to read a selector.
# Example Code – click.js
const { chromium } = require('playwright');
// https://playwright.dev/docs/api/class-page#page-click
// https://playwright.dev/docs/api/class-elementhandle#element-handle-click
(async () => {
// function code
// launching browser
const browser = await chromium.launch({ headless: false, slowMo: 100 });
const page = await browser.newPage();
await page.goto('https://www.apronus.com/music/lessons/unit01.htm');
// click on the keynotes
await page.click('#t1 > table > tr:nth-child(1) > td:nth-child(1) > button');
await browser.close();
})();
And that's all that we have to do.
Let's run it and see what happens.
Open a New Terminal, I want to do node click.js.
It was super-fast, right? We were not really able to hear that.
Let's change this slowMo to 300 (instead of 100) just to make it slower. And there, we were able to hear it.
Now, how about you give it a try and try to click other notes. You can pause the video here and come back after you have tried it.
While you were trying to click other notes, I decided to come up with my masterpiece, and I want to show it to you.
So, let's run it.
Yeah, I know. I really didn't create a masterpiece.
But hey, maybe this is a good opportunity for you to come up with this masterpiece. Show it to me. How about that?
Resources
Quiz
The quiz for this chapter can be found in 3.6
