Javascript Automation

This repository is to learn Javascript automation from scratch.

To start with Javascript automation, you should have fair understanding of the HTML page source code and CSS styling. Let's begin with that.

Open trello dashboard(https://trello.com) in chrome. And open Developer Tools (Ctrl+Shift+I or F12). We gonna play with Elements and Console tabs frequently.

Elements tab allow you to access page source and Console allows you to fire js commands.

Commands Overview and Object Identification using CSS

---

Tutorial 1 : https://youtu.be/oOhQix38a7s

🚀 What is document

document

Document object represents HTML document that is currently open in the browser. It has various properties. The way a document content is accessed and modified is called the Document Object Model, or DOM.

When we type document in console and hit ENTER, we get complete html document.

🚀 Methods to select elements on page.

document.querySelector(selector)

querySelector functions locate element(s) on the page based on selector given as the argument. It returns single element. If multiple elements exist for the matching criteria, it returns first element.

document.querySelectorAll(selector)

querySelectorAll returns list of elements and their count.

🚀 Using Tag Name

document.querySelector('div')

🚀 Using ID

document.querySelectorAll('#trello-root')

document.querySelectorAll('#notification')

According to css selector rules, # symbol is used to search elements using id.

🚀 Using Tag and ID together

document.querySelectorAll('p#notification')

*Tutorial 2 : *

🚀 Immediate child and index (nth-child)

To search element's direct child use > symbol. For example:

div#chrome-container > div

div#chrome-container > div:nth-child(1)

🚀 Indirect Child

div#chrome-container  div._15y4BAYUOX8GKU