In this tutorial, we are going to create a simple code snippet to automate tasks on a webpage without the need for any external tools or frameworks. If you find yourself having to repeatedly do the same stuff on a particular website, then you should probably try this. Moreover, it is a fun and good way to JavaScript and the DevTools. You can play around with browser games and try to beat the high score, just the way I got a high score of 400 clicks-per-second (CPS) in a game. [do not tell the police 😂] So let's get right into it. What are we building For the purpose of this post, we'd be automating this website that allows you to create invoices online. https://invoice-generator.com/ Let's assume we rarely change most of the input except these, for a particular client: invoice number units of hours worked date (auto-generated) Inspecting JS selector We will open our DevTools to be able to inspect elements and get a JS selector to access any element we want to work on. For instance, to get the input element, we right-click on the element in the Elements tab in DevTools and select invoice number copy JS path copy List of elements we will be interacting with const invoiceNumber = document.querySelector(
  "div.papers > div  div.title > div > div > input"
);
const billTo = document.querySelector(
  "div.papers > div > div:nth-child(1) > div.col.contact-info > div.row.bill-to-details > div:nth-child(1) textarea"
);
const invoiceFrom = document.querySelector(
  "div.papers > div > div:nth-child(1) > div.col.contact-info > div.contact.from textarea"
);
// date format "Dec 9,2021"
const dateInput = document.querySelector("#dp1639600324282");
const itemDescription = document.querySelector(
  "div.papers div.items-holder > div.items-table div.name textarea"
);
const itemQuantity = document.querySelector(
  "div.papers div.items-holder > div.items-table div.quantity > input"
);
const itemRate = document.querySelector(
  "div.papers div.items-holder > div.items-table div.unit_cost input"
); Then we'd create functions to perform the input value operations function promptsForUser() {
  invoiceNumber.value = prompt("Enter the invoic number");
  itemQuantity.value = prompt("Total hours worked");

	itemQuantity.dispatchEvent(new Event("change"))
}

function setConstantValue() {
  let d = new Date();
  const months = ["Jan","Feb","Mar","April","May","June","Aug","Sept","Oct","Nov","Dec",];
  dateInput.value = `${months[d.getMonth() - 1]} ${d.getDate()}, ${d.getFullYear()}`;
  invoiceFrom.value = "Ichigo Kurosaki,\nSubstitute Soul Reaper";
  billTo.value = "XYZ Limited,\nMugen Train District";
	itemDescription.value = "Bankai night shift";
  itemRate.value = "10";
}

promptsForUser()
setConstantValue() The function changes the value of the input elements to values that stay constant mostly through the use of the script and the function to retrieve some information from the script user. setConstantConstant promptsForUser Also, the total amount in the invoice listens to a event from the quantity so we manually dispatched a event. change change Saving our code as snippets in DevTools DevTools allow you to save your script in the browser and allow reusability Snippets We'd find the Snippet editor from the tab in DevTools Sources Create a new snippet and paste all our code within. Showcase Conclusion A downside to this approach if you have no control over the website is that the elements selectors can change anytime so this method is not generally advisable for web automation
Still, it's a great way to play around with DevTools. You can inspect , pause the javascript execution and play around with the debugger. Local Storage, Cookies Have fun trying to beat my 400 click-per-second high score!!!

Build a Workflow that Sends Form Submissions to Discord

How to Act Like You're Working When You're not With RobotJS

Subscribe to my newsletter to learn about my startup journey as a beginner.

Subscribe to my newsletter

Nominated for 2022 - HackerNoon Contributor of the Year - Automation

Nominated for 2022 - HackerNoon Contributor of the Year - Linux

Too Long; Didn't Read

Make resilience your competitive advantage

Automating Invoice Creation with Chrome DevTools: A How-To Guide

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

An Introduction on Arch Linux Pacman for Beginners

10 Indications That You Should Invest in Automation Via APIs

10 Commandments for AI-Assisted Social Media Marketers

11 Best Automation Testing Tools to Try in 2021

12 Use Cases of AI and Machine Learning In Finance

An Introduction on Arch Linux Pacman for Beginners

10 Indications That You Should Invest in Automation Via APIs

10 Commandments for AI-Assisted Social Media Marketers

11 Best Automation Testing Tools to Try in 2021

12 Use Cases of AI and Machine Learning In Finance

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps