Data scrapping from HTML table

Suppose we want to get data from this HTML table:
https://demoqa.com/webtables.

Write following code:

it("Web data scrapping", async () => {
        await page.goto("https://demoqa.com/webtables");
        let result = await page.evaluate(() => {
            let rows = document.querySelectorAll('.rt-tbody');
            return Array.from(rows, row => {
                let columns = row.querySelectorAll('.rt-td');
                return Array.from(columns, column => column.innerText);
            });
        });
        console.log(result[0]);
        let array = result[0];
        for (let i = 0; i < array.length; i++) {
            console.log(array[i]);
        }
    })

After executing this test, you will see that web table data has been scrapped

Handling multiple tab and windows

Handling tab:

it("Browser tab handling", async () => {
        await page.goto("https://demoqa.com/browser-windows");
        await page.click("#tabButton");
        await page.waitForTimeout(3000)
        let tabs = await browser.pages(); // get all tab
        let currentTab = tabs[tabs.length - 1]; // get current tab
        console.log(currentTab.url()); // get current tab url

        let header = await currentTab.$("#sampleHeading")
        let text = await currentTab.evaluate(e => e.textContent, header);
        console.log(text);
        await currentTab.close();
    })

Handling window:

it("Browser window handling", async () => {
        await page.goto("https://demoqa.com/browser-windows");
        await page.click("#windowButton");
        await page.waitForTimeout(3000)
        let tabs = await browser.pages(); // get all tab
        let currentTab = tabs[tabs.length - 1]; // get current tab
        console.log(currentTab.url()); // get current tab url

        let headerElement = await currentTab.$("#sampleHeading")
        let text = await currentTab.evaluate(e => e.textContent, headerElement);
        console.log(text);
        await currentTab.close();
    })

Actually both code are same. Puppeter has the same strategy to handle tab and window both

Handling Alert

it("Handling alert", async () => {
        await page.goto("https://demoqa.com/alerts");
        let alertButtonSelector = "#alertButton";
        await page.waitForSelector(alertButtonSelector);
        await page.on('dialog', async (dialog) => {
            await dialog.accept();
        });
        let buttonElement = await page.$$(alertButtonSelector);
        await buttonElement[0].click();
        await page.waitForTimeout(3000);

    })

Handling IFrame

it("Handling IFrame", async () => {
        await page.goto("https://demoqa.com/frames");
        let iframeSelector = "#frame1";
        await page.waitForSelector(iframeSelector);
        let frameHandle = await page.$(iframeSelector);
        let frame = await frameHandle.contentFrame();
        let headerElement = await frame.$('#sampleHeading');
        let headerText = await frame.evaluate(e => e.textContent, headerElement);
        console.log(headerText);

    })

Accessing Keyboard

Press Enter: await page.keyboard.press(‘Enter’)
Press Backspace: await page.keyboard.press(‘Backspace’)
Press Arrow: await page.keyboard.press(‘ArrowDown’);
Press Arrow: await page.keyboard.press(‘ArrowUp’);
Press Arrow: await page.keyboard.press(‘ArrowLeft’);
Press Arrow: await page.keyboard.press(‘ArrowRight’);

File Upload

Put an image file to your project folder. Write this code:

it("File Upload", async () => {
        await page.goto("https://demoqa.com/upload-download");
        const [fileChooser] = await Promise.all([
            page.waitForFileChooser(),
            page.click("#uploadFile")
        ])
        await fileChooser.accept(['rose.jpg']);
        await page.waitForTimeout(3000);

    })

File Download

it("File download", async () => {
        const downloadPath = path.resolve(
            process.cwd(),
            `downloads`,
        );
        await page.goto("https://demoqa.com/upload-download");
        await page.waitForSelector("#downloadButton");
        await page.click("#downloadButton", { timeout: 5000 });
        await page._client.send('Page.setDownloadBehavior', {
            behavior: 'allow',
            downloadPath: downloadPath,
        });

        console.error('Downloading...');
        let fileName;
        while (!fileName || fileName.endsWith('.crdownload')) {
            await new Promise(resolve => setTimeout(resolve, 100));
            [fileName] = await util.promisify(fs.readdir)(downloadPath);
        }
        const filePath = path.resolve(downloadPath, fileName);
        console.error('Downloaded file:', filePath);

    })

Practice Form

Install chai by hitting this command:
npm i chai
Then import the following package:

const { expect } = require('chai');

Then write this code:

it("Practice Form", async () => {
        await page.goto("https://demoqa.com/automation-practice-form", { waitUntil: 'domcontentloaded' });
        await page.type("#firstName", "Salman");
        await page.type("#lastName", "Rahman");
        await page.type("#userEmail", "salmansrabon@gmail.com");
        await page.click("#gender-radio-1");
        await page.type("#userNumber", "1602020110");
        await page.click("#dateOfBirthInput", { clickCount: 3 });
        await page.type("#dateOfBirthInput", "01 Jan 2000");
        await page.click("#hobbies-checkbox-2");
        await page.type("#currentAddress", "Gulshan,Dhaka-1212");
        await page.click("#state");
        await page.type("#state", "NCR");
        await page.keyboard.press("ArrowDown");
        await page.keyboard.press("Enter");
        await page.click("#submit");
        let successfulMmessageTitleSelector = "#example-modal-sizes-title-lg";
/*      Reading data from html text
        await page.waitForSelector(successfulMmessageTitleSelector);
        let textElement = await page.$(successfulMmessageTitleSelector);
        let text = await page.evaluate(e => e.textContent, textElement);
        console.log(text); */

        expect(text).contains("Thanks for submitting the form"); // assertion using chai
        await page.waitForSelector("#closeLargeModal");
        await page.click("#closeLargeModal");
    })

Take Screenshot

Create a folder named screenshots in your project. Then write following code:

it("Take screenshot", async () => {
        await page.goto("https://demoqa.com/upload-download", { waitUntil: 'domcontentloaded' }); //wait until page fully loaded
        await page.screenshot({ path: './screenshots/scrshot.png' })
    })