How to automate a feedback form or any input form in JavaScript using a puppeteer? In some previous puppeteer exercises, we have seen many examples like Automate login form in puppeteer, Automate registration form in puppeteer.

In this, puppeteer tutorial, let’s automate test cases to automate the feedback form.

TestScenario

• Open Browser.
• Load application URL
• Navigate to the Feedback Page
• Enter Username
• Enter Email
• Enter Subject
• Enter feedback
• Click to send message button
• Verify Feedback is submitted successfully

Automate feedback form using puppeteer

Create a simple project in visual studio code to write the automation script in puppeteer below is the folder structure. know about the automation project setup in puppeteer 

Puppeteer automation script for feedback form

const puppeteer = require('puppeteer')
const expect = require('chai').expect

describe("Setup Testing",()=>{
     it("Validate Feedback Form",async()=>{
    const browser = await puppeteer.launch({headless:false,
        defaultViewport: null,
        args: ['--start-maximized'] 
    
    })
    const page = await browser.newPage()
    await page.goto('http://zero.webappsecurity.com/')
    await page.click('[id="feedback"]')
    
    const nameInput = await page.waitForSelector('#name', {timeout: 60000});
    await nameInput.type('Jame', {delay: 5});
    const emailInput = await page.waitForSelector('#email', {timeout: 60000});
    await emailInput.type('Jame@gmail.com', {delay: 5});
    const subjectInput = await page.waitForSelector('#subject', {timeout: 60000});
    await subjectInput.type('This is for Testing', {delay: 5});
    const commentInput = await page.waitForSelector('#comment', {timeout: 60000});
    await commentInput.type('Best web for automation practice', {delay: 5});
    await page.click('[value="Send Message"]')
    let SuccessfulMessage = await page.$eval('.page-header', el => el.textContent)
    expect(SuccessfulMessage).to.be.a('string','Thank you for your comments, fdgfs. They will be reviewed by our Customer Service staff and given the full attention that they deserve.');
    await page.close();

     });
    });

package.json

{
  "name": "feedbackform",
  "version": "1.0.0",
  "description": "Automate Feedback form",
  "main": "index.js",
  "dependencies": {
    "chai": "^4.3.4",
    "puppeteer": "^13.0.1"
  },
  "devDependencies": {
    "mocha": "^9.1.3"
  },
  "scripts": {
    "test": "node ./node_modules/mocha/bin/mocha --timeout=30000 ./TestCases"
  },
  "keywords": [
    "testing",
    "automation",
    "testing"
  ],
  "author": "codebun",
  "license": "ISC"
}

Run the script:

npm run test