Automation Testing

Are you the one who keeps on thinking 'How to switch from Manual Testing to Automation Testing ?

I am gonna help you with the basics that helps your journey.....

#part1 - DOM

1. What is the DOM?

DOM stands for The Document Object Model (DOM).

The DOM is like a map of a webpage that computers use to understand and change web pages.

It's a way for computer programs, like JavaScript, to talk to and change what you see on a website.

The DOM is not a part of JavaScript itself but is provided by web browsers as an API (Application Programming Interface) that JavaScript can use to interact with web pages.

2. DOM Elements and Tree Structure:

Think of a web page like a tree with branches.

Each part of the page, like text, pictures, and buttons, is a branch (or node) on the tree.

The top of the tree is the "Document," representing the whole page.

3. Node Types:

Nodes in the DOM tree can be of various types, including elements, text nodes, attribute nodes, etc.

The most commonly used node types include:

- Element nodes: Represent HTML elements, like <div>, <p>, etc.

- Text nodes: Represent the text within elements.

- Attribute nodes: Represent attributes of elements.

4. Accessing DOM Elements:

You can access DOM elements in JavaScript using various methods like "getElementById", "getElementsByClassName", "getElementsByTagName", or "querySelector".

5. Modifying DOM Elements:

You can change the content, attributes, or structure of DOM elements using JavaScript.

Common methods for modifying the DOM include:

- innerHTML: Changes the HTML content of an element.

- textContent: Changes the text content of an element.

- setAttribute: Sets or changes attributes of an element

6. Creating and Appending Elements:

You can create new elements and append them to the DOM using functions like "createElement'' and "appendChild".

7. Event Handling:

You can use the DOM to set up event listeners to respond to user actions, like clicks, mouse movements, and keyboard inputs.

Event listeners can be attached to DOM elements to trigger JavaScript functions when specific events occur.

8. Traversal and Selecting Elements:

You can navigate and select elements within the DOM tree using properties like ''parentNode'', ''childNodes'', ''nextSibling'', ''previousSibling'', etc.

The ''querySelector'' and ''querySelectorAll'' methods allow you to select elements using CSS-like selectors.

9. CSS Manipulation:

You can change the styles of DOM elements by modifying their CSS properties.

This can be done through the ''style'' property or by adding/removing CSS classes.

10. DOM Performance:

- When manipulating the DOM, it's important to be mindful of performance, as excessive DOM manipulation can slow down web applications.

- Techniques like batch updates and minimizing reflows and repaints are important for optimizing performance.

11. Cross-Browser Compatibility:

Different web browsers may have slight differences in how they implement the DOM.

Libraries like jQuery and modern frameworks often provide a layer of abstraction to handle cross-browser compatibility.

In summary, the DOM is a crucial part of web development, allowing you to interact with web page content and make it dynamic and interactive.

It is a core concept for client-side scripting with JavaScript and is essential for building modern web applications.

#Automationtesting