DEV Community: hjqueeen

jQuery

hjqueeen — Tue, 13 Feb 2024 12:44:19 +0000

jQuery Selectors

element Selector // $("p")
id Selector // $("#test")
class Selector // $(".test")

$("p")
$("#test")
$(".test")

jQuery Event Methods

Mouse Events
click
dblclick // double-clicks
mouseenter // mouse pointer enters
mouseleave // mouse pointer leaves
hover // mouseenter() + mouseleave()
Keyboard Events
keypress
keydown
keyup
Form Events
submit
change
focus
blur // loses focus
Document/Window Events
load
resize
scroll
unload

on() // for one or more event handlers

$("p").on("click", function(){
  $(this).hide();
});

$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

$(document).ready() // The $(document).ready() method allows us to execute a function when the document is fully loaded.

jQuery Effects

jQuery Hide/Show
jQuery Fade
jQuery Slide
jQuery Animate
jQuery stop()
jQuery Callback
jQuery Chaining

jQuery HTML

jQuery Get
jQuery Set
jQuery Add
jQuery Remove
jQuery CSS Classes
jQuery css()
jQuery Dimensions

jQuery Traversing

jQuery Traversing
jQuery Ancestors
jQuery Descendants
jQuery Siblings
jQuery Filtering

jQuery AJAX

jQuery AJAX Intro
jQuery Load
jQuery Get/Post

jQuery Misc

jQuery noConflict()
jQuery Filters

Useful ES6 Syntax to Know( reduce, bind, every)

hjqueeen — Tue, 13 Feb 2024 10:57:49 +0000

1. reduce

The reduce method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value. It's particularly useful for summing up values, concatenating strings, or combining array elements in a single value in various ways.

Syntax:

array.reduce(function(accumulator, currentValue, currentIndex, array) {
  // Return the updated accumulator
}, initialValue);

Example: Summing an Array of Numbers

const numbers = [1, 2, 3, 4, 5];

// Sum all numbers in the array
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0); // 0 is the initial value of the accumulator

console.log(sum); // Output: 15

Example: Creating a Map of Item Frequencies

const items = ['apple', 'banana', 'orange', 'banana', 'apple'];

const itemCounts = items.reduce((accumulator, item) => {
  // Initialize the item count as 0 if not already in the accumulator
  accumulator[item] = (accumulator[item] || 0) + 1;
  return accumulator;
}, {}); // Initialize accumulator as an empty object

console.log(itemCounts); // Output: { apple: 2, banana: 2, orange: 1 }

2. bind

The bind method allows you to permanently set the this context of a function. Regardless of how the function is called, this will refer to the object specified at the time bind was called. This is particularly useful for callback functions or event handlers, where the execution context might not be what you expect.

Syntax:

const boundFunction = originalFunction.bind(thisArg[, arg1[, arg2[, ...]]]);

thisArg: The value to be passed as the this parameter to the target function when the bound function is called.
arg1, arg2, ...: Arguments to prepend to arguments provided to the bound function when invoking the target function.
Example:

const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, ${this.name}`);
  }
};

setTimeout(person.greet, 1000); // Typically, `this` would refer to the global object (window) in this call
setTimeout(person.greet.bind(person), 1000); // Using `bind`, `this` will refer to the `person` object

In this example, calling person.greet directly within setTimeout would make this refer to the global object rather than the person object. Using the bind method to explicitly bind this to the person object ensures that this refers to person when setTimeout executes the function.

3. every

The every method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

Syntax:

array.every(function(element, index, array) {
  // Return a boolean value
});

Example: Checking if All Numbers are Positive

const numbers = [1, 2, 3, 4, 5];

const allPositive = numbers.every(number => {
  return number > 0;
});

console.log(allPositive); // Output: true

Example: Verifying Age Eligibility

const ages = [22, 18, 19, 23, 17];

const allEligible = ages.every(age => {
  return age >= 18;
});

console.log(allEligible); // Output: false, because one age is below 18

Underscore.js and ES6

hjqueeen — Tue, 13 Feb 2024 10:35:44 +0000

Underscore.js is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It was first released in 2009 by Jeremy Ashkenas, who is also known for creating Backbone.js and CoffeeScript. Underscore.js offers utility functions for common programming tasks, including manipulating arrays, objects, and functions.

As for its current usage, while Underscore.js was extremely popular in the early 2010s for its utility functions, the landscape of JavaScript has evolved significantly since then. Many features that were once only available through libraries like Underscore.js have been incorporated into the ECMAScript standard, making these libraries less essential for modern development. For example, ES6 (ECMAScript 2015) introduced a slew of new features, including arrow functions, promises, and template literals, as well as new methods for arrays and objects that replicate much of the functionality provided by Underscore.js.

Today, while Underscore.js is not as widely used as it once was, it remains a valuable resource for projects that require compatibility with older browsers or that already have a dependency on it. Developers might also prefer it for its concise API and functional programming style in specific scenarios. However, for most modern JavaScript development, native ES6+ features and other libraries or frameworks like Lodash (a similar library that offers more features and better performance in some cases) or functional programming libraries such as Ramda may be more commonly recommended.

Let's explore a comprehensive list of Underscore.js functionalities that have been integrated into ES6 (ECMAScript 2015) and beyond, providing examples of both Underscore.js and their native JavaScript counterparts.

Only in Underscore.js

1. bindAll

The bindAll function in Underscore.js is used to permanently bind one or more methods of an object to the object itself. This is particularly useful for ensuring that the this context within methods accurately points to the object, especially when methods are passed as callbacks or used as event handlers. By using bindAll, you can ensure that this within the methods always refers to the specified object, preventing this from referring to a different context.

_.bindAll(object, methodNames...)

object: The object whose methods' this context you want to bind.
methodNames: One or more method names to bind. Each name is specified as a string. You can list multiple method names separated by commas.

var obj = {
  name: 'Underscore.js',
  greet: function() {
    console.log("Hello from " + this.name);
  },
  farewell: function() {
    console.log("Goodbye from " + this.name);
  }
};

// Bind the greet and farewell methods to the obj object
_.bindAll(obj, 'greet', 'farewell');

setTimeout(obj.greet, 1000); // Outputs "Hello from Underscore.js"
setTimeout(obj.farewell, 1000); // Outputs "Goodbye from Underscore.js"

In this example, when obj.greet and obj.farewell are called using setTimeout, _.bindAll ensures these methods are correctly bound to the obj object, allowing this.name to correctly reference the object's name property.

More : bindAll

2. wrap

The purpose of wrap is to take an existing function and a wrapper function, and return a new function that, when called, calls the wrapper function with the original function passed as the first argument, followed by any arguments passed to the new function.

Syntax:

_.wrap(function, wrapper)

function: The original function to wrap.
wrapper: The function that will wrap the original function. The first argument to the wrapper will be the original function.

Example:

var greet = function(name) { return "hello: " + name; };
var shout = _.wrap(greet, function(func) {
  return func().toUpperCase() + "!";
});

shout('moe');
// => "HELLO: MOE!"

In this example, shout is a new function that wraps greet with additional functionality (converting the greeting to uppercase and appending an exclamation mark).

More : wrap

3. _.mixin(object)

Allows you to extend Underscore with your own utility functions. Pass a hash of {name: function} definitions to have your functions added to the Underscore object, as well as the OOP wrapper. Returns the Underscore object to facilitate chaining.

_.mixin({
  capitalize: function(string) {
    return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
  }
});
_("fabio").capitalize();
=> "Fabio"

4. _.template

Compiles JavaScript templates into functions that can be evaluated for rendering. Useful for rendering complicated bits of HTML from JSON data sources. Template functions can both interpolate values, using <%= … %>, as well as execute arbitrary JavaScript code, with <% … %>. If you wish to interpolate a value, and have it be HTML-escaped, use <%- … %>. When you evaluate a template function, pass in a data object that has properties corresponding to the template's free variables. The settings argument should be a hash containing any _.templateSettings that should be overridden.

var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'});
=> "hello: moe"

var template = _.template("<b><%- value %></b>");
template({value: '<script>'});
=> "<b>&lt;script&gt;</b>"

You can also use print from within JavaScript code. This is sometimes more convenient than using <%= ... %>.

var compiled = _.template("<% print('Hello ' + epithet); %>");
compiled({epithet: "stooge"});
=> "Hello stooge"

Similar Funktion in Underscore.js and ES6

_.isUndefined
Returns true if value is undefined.

_.isUndefined(window.missingVariable);
=> true

_.keys
Retrieve all the names of the object's own enumerable properties.

_.keys({one: 1, two: 2, three: 3});
=> ["one", "two", "three"]

_.isFunction
_.find
_.has
_.defaults
_.isEmpty
_.last
_.first
_.isArray
_.size
_.each
_.rtoken
_.set

Array Methods

_.each / _.forEach

Underscore.js: _.each([1, 2, 3], alert);
ES6: [1, 2, 3].forEach(alert);

_.map

Underscore.js: _.map([1, 2, 3], function(num) { return num * 3; });
ES6: [1, 2, 3].map(num => num * 3);

_.filter

Underscore.js: _.filter([1, 2, 3, 4, 5], function(num) { return num % 2 === 0; });
ES6: [1, 2, 3, 4, 5].filter(num => num % 2 === 0);

_.find

Underscore.js: _.find([1, 2, 3, 4, 5], function(num) { return num % 2 === 0; });
ES6: [1, 2, 3, 4, 5].find(num => num % 2 === 0);

_.reduce

Underscore.js: _.reduce([1, 2, 3], function(memo, num) { return memo + num; }, 0);
ES6: [1, 2, 3].reduce((memo, num) => memo + num, 0);

_.every

Underscore.js: _.every([2, 4, 6], function(num) { return num % 2 === 0; });
ES6: [2, 4, 6].every(num => num % 2 === 0);

_.some

Underscore.js: _.some([2, 4, 5], function(num) { return num % 2 === 0; });
ES6: [2, 4, 5].some(num => num % 2 === 0);

Object Methods

_.keys

Underscore.js: _.keys({one: 1, two: 2, three: 3});
ES6: Object.keys({one: 1, two: 2, three: 3});

_.values

Underscore.js: _.values({one: 1, two: 2, three: 3});
ES6: Object.values({one: 1, two: 2, three: 3});

_.extend / Object.assign

Underscore.js: _.extend({name: 'Moe'}, {age: 50});
ES6: Object.assign({name: 'Moe'}, {age: 50});

Utility Methods

_.range

Underscore.js: _.range(10);
ES6: Array.from({length: 10}, (v, k) => k);
Alternative ES6: [...Array(10).keys()];

Function Methods

While ES6 does not directly replace all function utilities from Underscore.js like _.debounce or _.throttle, newer JavaScript environments and libraries often provide similar functionalities, and developers can implement these patterns using native JavaScript or newer web APIs.

More Informations: You-Dont-Need-Lodash-Underscore

Building a test environment with Selenium WebDriver and Java (using IntelliJ IDEA)

hjqueeen — Sat, 03 Feb 2024 07:37:19 +0000

Introduction

Getting started with Selenium WebDriver for automated testing can be a powerful addition to your development toolkit. In this guide, we'll walk through the process of setting up Selenium WebDriver with Java, managing dependencies with Maven, integrating ChromeDriver using WebDriverManager, and configuring it in IntelliJ.

Prerequisites

Before we begin, ensure you have the following installed on your machine:

IntelliJ IDEA

Step 1: Create a Java Project in IntelliJ

Open IntelliJ IDEA and select "Create New Project."

Enter project information:
Enter the group ID and artifact ID of your project. Then select a location for your project.
Select project type:
Choose one of our build tools, such as Maven or Gradle. Maven is commonly used. For now, let's choose Maven.

Select JDK: Click Download, then select Oracle open JDK and click Download.

We do not select Add sample code and Create git repository here.

Click "Create"

Step 2: Configure Maven Dependencies

Open the pom.xml file in your project.

Add the following after < properties>< /properties> : dependencies for Selenium WebDriver, JUnit, and WebDriverManager: Please modify the version number to match the latest version.



<dependencies>
    <dependency>
        <groupId>org.seleniumhq.selenium</groupId>
        <artifactId>selenium-java</artifactId>
        <version>4.17.0</version>
    </dependency>
    <dependency>
        <groupId>io.github.bonigarcia</groupId>
        <artifactId>webdrivermanager</artifactId>
        <version>5.6.3</version>
    </dependency>
    <dependency>
        <groupId>org.junit.jupiter</groupId>
        <artifactId>junit-jupiter-api</artifactId>
        <version>5.10.1</version>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.junit.jupiter</groupId>
        <artifactId>junit-jupiter-engine</artifactId>
        <version>5.10.1</version>
        <scope>test</scope>
    </dependency>
</dependencies>

IntelliJ should automatically resolve and download the dependencies.

About WebDriverManager (io.github.bonigarcia)

WebDriverManager automates the download and setup of ChromeDriver, eliminating the need for manual handling. This streamlines the process, making it convenient and hassle-free for Selenium WebDriver test setups.

To learn more about WebDriverManager, visit the official GitHub repository.

About JUnit

JUnit is a widely used testing framework for Java that simplifies the process of writing and running unit tests. It provides annotations and assertions to define test cases, making it an essential tool for ensuring the reliability and correctness of Java applications.

To explore the features and capabilities of JUnit, refer to the official JUnit user guide.

Add additional dependencies for logging



<dependencies>
    <!-- Other dependencies -->
    <dependency>
        <groupId>ch.qos.logback</groupId>
        <artifactId>logback-classic</artifactId>
        <version>1.4.14</version>
        <scope>test</scope>
    </dependency>
</dependencies>

About ch.qos.logback:logback-classic

logback-classic enhances your test logs, providing valuable information about the test execution flow, errors, and other relevant details. When using WebDriverManager, having detailed logs can be beneficial for troubleshooting any issues related to web driver setup and configuration.

Without the logging feature, you may encounter warnings in the console window when running tests.

Step 3: Create a java file to write your test files.

Create a Java class called 'MyTest' in the src/test/java folder.

Set Up Selenium WebDriver with WebDriverManager In your test class, use WebDriverManager: ```java

import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class MyTest {
public static void main(String[] args) {
WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver();

    // Your test logic here

    driver.quit();
}

}

### Step 4:  Import Dependencies and Reload Project
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vs3jdxg6oe3ae2xel71z.png)
You can see that the information you entered is in red. Something wasn't working properly. Now let's download the dependencies and add them to our project.

- **Open the Maven tab in IntelliJ IDEA:**
Find the Maven tab in the right sidebar of IntelliJ IDEA, or click the "Maven" tab at the bottom.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xd79tft0wd4xg3xxoycx.png)

- **Dependency updates:**
In the "Lifecycle" section, run clean, then run install to get the dependencies.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81vvwrr8k0nmhrq19bh7.png)
- **Reload project: **
In the Maven tab, click the "Reload Project" icon (↻) to reload the project.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y84xah2rgj83hyws1qar.png)

### Step 5: Running tests through Chrome Driver
Chrome must be installed before running the test.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w38c2ut4tmd5s0hui6lo.png)
Right-click or click the arrow on the left bar to execute 'Run.MyTest.main()'.

If the Chrome page opens and closes, and you see the following in the console, it's running fine.

Process finished with exit code 0


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/selmoiqvn1hua6co3tcq.png)



### Step 6 : Write Your First Test
Write a simple test using Selenium WebDriver methods. For example:

```java


import io.github.bonigarcia.wdm.WebDriverManager;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

import org.junit.jupiter.api.Test;

import java.time.Duration;

public class MyTest {
    @Test
    public void testGoogleSearch() {
        WebDriverManager.chromedriver().setup();
        WebDriver driver = new ChromeDriver();


        driver.get("https://www.selenium.dev/selenium/web/web-form.html");

        driver.getTitle();

        driver.manage().timeouts().implicitlyWait(Duration.ofMillis(500));

        WebElement textBox = driver.findElement(By.name("my-text"));
        WebElement submitButton = driver.findElement(By.cssSelector("button"));

        textBox.sendKeys("Selenium");
        submitButton.click();

        WebElement message = driver.findElement(By.id("message"));
        message.getText();

//        driver.quit();
    }
}

If you see the following screen and a message appears, it is successful.

Conclusion

You've successfully set up Selenium WebDriver with Java, Maven, and ChromeDriver using WebDriverManager in IntelliJ. This approach simplifies the management of WebDriver binaries, ensuring compatibility with your test environment.

Feel free to explore more advanced features of Selenium and customize your testing framework based on your project requirements.

Happy testing!

This modification integrates WebDriverManager for automatic management of the ChromeDriver version, making your test setup more convenient and maintainable.

await functions in JavaScript

hjqueeen — Fri, 02 Feb 2024 21:11:17 +0000

When writing tests using Selenium, a crucial aspect, especially when a web page behaves asynchronously, is the "waiting" part. During the wait, the code should be designed to wait until specific conditions are met. The technical aspects for this include "Explicit Waits" and "Implicit Waits."

Explicit Waits:

Explicit waits involve waiting until specific conditions are met.
The WebDriverWait class can be used to wait for specific conditions.
For example, you can wait until a specific element appears or until a certain condition is satisfied.

const { Builder, By, until } = require('selenium-webdriver');

// ...

const driver = new Builder().forBrowser('chrome').build();
await driver.get('https://example.com');

const element = await driver.findElement(By.id('myElementId'));

// set to wait
await driver.wait(until.elementLocated(By.id('myElementId')), 5000);

Implicit Waits:

Implicit waits are set globally, causing the WebDriver to wait until specific conditions are met.

const { Builder, By } = require('selenium-webdriver');

// ...

const driver = new Builder().forBrowser('chrome').build();
await driver.manage().setTimeouts({ implicit: 5000 });

await driver.get('https://example.com');

// set to wait
const element = await driver.findElement(By.id('myElementId'));

It can be set using the implicitlyWait method. Explicit waits are generally recommended as they allow more flexibility in writing tests, waiting only until specific conditions are met. Be cautious when using implicit waits as they are a global setting and can impact the entire code. Optionally, you can mix and match both approaches based on your requirements.

Difference between driver.wait and driver.manage().setTimeout

Clarity of Waiting Conditions:

By using driver.wait, you can explicitly wait until specific conditions are met. In the above code, it is set to wait for a maximum of 5 seconds until the element with 'myElementId' appears.
manage().setTimeouts({ implicit: 5000 }) represents an implicit wait time, globally set, causing the WebDriver to automatically wait in various states of the page. This means it applies not to specific conditions but to all elements on the page.

Condition Satisfaction:

With driver.wait, the script waits until the specified condition is satisfied or a timeout occurs, proceeding to the next step upon condition satisfaction.
manage().setTimeouts({ implicit: 5000 }) waits for a maximum of 5 seconds, even if no elements on the page are loaded. In other words, the code continues to execute after the specified wait time, regardless of whether the condition is satisfied.

Scope of Application:

Using driver.wait allows you to wait for specific elements, such as waiting for a particular element's attribute to change.
manage().setTimeouts({ implicit: 5000 }) applies globally to all elements on the page.

Therefore, the choice depends on specific situations and requirements. If you need to explicitly wait for a specific element, using driver.wait is preferable. If you want to set a general wait time for overall page loading, manage().setTimeouts({ implicit: 5000 }) might be more appropriate.

Several standby features in Selenium WebDriver

Using until.elementLocated(locator) and until.elementIsVisible(element):

Waits until a specific element is located or becomes visible on the screen.

await driver.wait(until.elementLocated(By.id('myElementId')), 5000);
await driver.wait(until.elementIsVisible(driver.findElement(By.id('myElementId'))), 5000);

Using until.titleIs(title):

Waits until the page title matches a specific value.

await driver.wait(until.titleIs('Expected Title'), 5000);

Using until.titleContains(titleSnippet):

Waits until the page title contains a specific substring.

await driver.wait(until.titleContains('Snippet'), 5000);

Using until.urlIs(url) and until.urlContains(urlSnippet):

Waits until the current page URL matches a specific value or contains a specific substring.

await driver.wait(until.urlIs('https://example.com'), 5000);
await driver.wait(until.urlContains('example'), 5000);

These methods are employed with driver.wait, allowing you to choose the appropriate until condition based on your specific scenario. By combining these waiting mechanisms, you can create robust and stable test scripts.

Managing asynchronous tasks when writing tests

hjqueeen — Fri, 02 Feb 2024 20:42:31 +0000

When writing tests using a Selenium driver, it is important to manage asynchronous tasks because interactions on a web page often occur asynchronously. For instance, AJAX requests, timers, and event handlers on a web page can operate asynchronously.

If the test code doesn't account for asynchronous operations, unexpected behavior may occur. For example, attempting to manipulate an element before it has fully loaded could result in errors.

In what order do you expect the text to appear in the console?

console.log('Start');

setTimeout(() => {
    console.log('Timeout callback');
}, 0);

Promise.resolve().then(() => {
    console.log('Promise resolved');
});

console.log('End');

It can be output in the following order: Start, End, Promise resolved, and Timeout callback. This is different from the order in which the code was written.

This is due to the event loop and asynchronous nature of JavaScript. Here are some common reasons:

Event Loop:

JavaScript operates on a single thread and handles asynchronous tasks through the event loop. Callback functions or the then block of Promises go into the event queue and are executed sequentially as the event loop continues to run.

Microtasks and Macrotasks:

The then block of Promises is processed as a microtask, executed immediately when the microtask queue is empty. On the other hand, setTimeout, setInterval, event handlers, etc., are processed as macrotasks and executed in the next cycle of the event loop. This can lead to unexpected behavior.

Asynchronous Function Calls:

Asynchronous functions operate asynchronously, allowing code to proceed to the next without waiting for the completion of the task. To use the result of an asynchronous function, it needs to be handled within the function's callback or the then block.

Race Conditions:

Race conditions may occur when multiple asynchronous tasks are executed simultaneously, leading to unexpected results.

How to manage asynchronous tasks.

First, let's consider JavaScript.

// javascript
const { Builder, By, Key, until } = require('selenium-webdriver');

async function example() {
    // Create a new WebDriver instance
    const driver = await new Builder().forBrowser('chrome').build();

    try {
        // Navigate to a URL
        await driver.get('https://www.example.com/');

        // Find an element by ID
        const element = await driver.findElement(By.id('someElementId'));

        // Perform some actions
        await element.sendKeys('Hello, Selenium!', Key.RETURN);

        // Wait for an element to be present
        await driver.wait(until.elementLocated(By.id('anotherElementId')), 5000);

        // Do more actions...

    } catch (error) {
        console.error('An error occurred:', error);
    } finally {
        // Close the browser
        await driver.quit();
    }
}

// Call the example function
example();

In the code above, we are using async/await to manage asynchronous operations. The await keyword is used when waiting for a promise, improving readability of code and convenient error handling.

Managing Asynchronous Tasks in JavaScript:

1. Callbacks:

Use callback functions to handle the results of asynchronous operations. Pass a function as an argument to be executed once the task is complete.

2. Promises:

Utilize Promises to improve readability and handle asynchronous operations more elegantly. Promises allow you to attach then and catch handlers to handle success or failure.

3. Async/Await:

Take advantage of the Async/Await syntax for asynchronous code. This modern feature simplifies the syntax and makes asynchronous code look more like synchronous code, enhancing readability.

4. Event Emitters:

Use event emitters to create custom events and handle asynchronous operations. This pattern is particularly useful for scenarios where multiple parts of your codebase need to react to the completion of a task.

5. setTimeout and setInterval:

Schedule tasks using setTimeout and setInterval for macrotasks. Be cautious with their usage to prevent unintended side effects and race conditions.

6. Avoiding Callback Hell:

Structure your code to avoid callback hell by using named functions or adopting modular design patterns. This enhances code maintainability and readability.

Remember to choose the approach that best fits your specific use case and coding style.

Here is an example in Java:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class SeleniumExample {

    public static void main(String[] args) {
        // Set the path to the chromedriver executable
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");

        // Create a new WebDriver instance (in this case, Chrome)
        WebDriver driver = new ChromeDriver();

        try {
            // Navigate to a URL
            driver.get("https://www.example.com/");

            // Find an element by ID
            WebElement element = driver.findElement(By.id("someElementId"));

            // Perform some actions
            element.sendKeys("Hello, Selenium!");

            // Wait for an element to be present
            // Note: WebDriverWait can be used for explicit waits in Java
            WebDriverWait wait = new WebDriverWait(driver, 10);
            wait.until(ExpectedConditions.presenceOfElementLocated(By.id("anotherElementId")));

            // Do more actions...

        } finally {
            // Close the browser
            driver.quit();
        }
    }
}

👉🏻Learn more about await functions in JavaScript

what are the differences (and when to use) selenium-webdriver over webdriverjs?

hjqueeen — Fri, 02 Feb 2024 10:02:50 +0000

https://stackoverflow.com/questions/26074382/javascript-with-webdriverjs-or-java-with-selenium-webdriver

https://github.com/mekdev/mocha-selenium-pageobject

Jest - JavaScript Testing

hjqueeen — Fri, 02 Feb 2024 09:26:26 +0000

Assert module

hjqueeen — Fri, 02 Feb 2024 08:30:45 +0000

1. Definition and Usage

The assert module provides a way of testing expressions. If the expression evaluates to 0, or false, an assertion failure is being caused, and the program is terminated.

This module was built to be used internally by Node.js.

2. Syntax

The syntax for including the assert module in your application:

var assert = require('assert');

3. Usage

assert()

Checks if a value is true. Same as assert.ok()

var assert = require('assert');
assert(50 > 70); // AssertionError: false == true

deepEqual()

Checks if two values are equal
If two objects, or their child objects, are not equal, an error is thrown and the program is terminated:

var assert = require('assert');
var x = { a : { n: 0 } };
var y = { a : { n: 0 } };
var z = { a : { n: 1 } };
assert.deepEqual(x, y); //OK
assert.deepEqual(x, z); /*AssertionError: { a: { n: 0 } } deepEqual {a: { n: 1 } }*/

deepStrictEqual()

If two objects, or their child objects, are not equal (both in value and type), an error is thrown and the program is terminated:

var x = { a : { n: 0 } };
var y = { a : { n: 0 } };
var z = { a : { n: '0' } };
assert.deepStrictEqual(x, y); //OK
assert.deepStrictEqual(x, z); /*AssertionError: { a: { n: 0 } } deepStrictEqual {a: { n: '0' } }*/

doesNotThrow()

equal()

Checks if two values are equal, using the equal operator (==)

assert.equal(50, 50); //OK
assert.equal(50, "50"); //OK
assert.equal(50, 70); /*AssertionError: 50 == 70 */

fail()

Throws an Assertion Error

assert.ifError(value)

Throws a specified error if the specified error evaluates to true

notDeepEqual()

Checks if two values are not equal
If two objects, and their child objects, are equal, an error is thrown and the program is terminated:

var x = { a : { n: 0 } };
var y = { a : { n: 0 } };
var z = { a : { n: 1 } };
assert.notDeepEqual(x, z); //OK
assert.notDeepEqual(x, y); /*AssertionError: { a: { n: 0 } } notDeepEqual {a: { n: 0 } }*/

notDeepStrictEqual()

Checks if two values are not equal, using the strict not equal operator (!==)

var x = { a : { n: 0 } };
var y = { a : { n: 0 } };
var z = { a : { n: '0' } };
assert.notDeepStrictEqual(x, z); //OK
assert.notDeepStrictEqual(x, y); /*AssertionError: { a: { n: 0 } } notDeepStrictEqual {a: { n: 0 } }*/

notEqual()

Checks if two values are not equal, using the not equal operator (!=)

notStrictEqual()

Checks if two values are not equal, using the strict not equal operator (!==)

assert.ok(value[, message])

Checks if a value is true

assert.ok(50 > 70); // AssertionError: false == true

strictEqual()

Checks if two values are equal, using the strict equal operator (===)

throws()

Learn more assert module

Selenium Webdriver Javascript

hjqueeen — Fri, 02 Feb 2024 08:23:05 +0000

1. Start the session

    driver = await new Builder().forBrowser('chrome').build();

2. Take action on browser

    await driver.get('https://www.selenium.dev/selenium/web/web-form.html');

3. Request browser information

    let title = await driver.getTitle();

4. Establish(설립하다) Waiting Strategy

    await driver.manage().setTimeouts({implicit: 500});

5. Find an element

    let textBox = await driver.findElement(By.name('my-text'));
    let submitButton = await driver.findElement(By.css('button'));

6. Take action on element

    await textBox.sendKeys('Selenium');
    await submitButton.click();

7. Request element information

    let value = await message.getText();

8. End the session

    await driver.quit();

EXAMPLE Github source code
NEXT learn about Assert module

Was ist Software-Testing?

hjqueeen — Thu, 01 Feb 2024 08:47:46 +0000

Software-Testing ist eine Methode zur Überprüfung, ob das tatsächliche Softwareprodukt den erwarteten Anforderungen entspricht und um sicherzustellen, dass das Softwareprodukt fehlerfrei ist. Dabei werden Software-/Systemkomponenten mithilfe manueller oder automatisierter Tools ausgeführt, um eine oder mehrere interessierende Eigenschaften zu bewerten. Das Ziel des Software-Testings ist es, Fehler, Lücken oder fehlende Anforderungen im Gegensatz zu den tatsächlichen Anforderungen zu identifizieren.

Die Wichtigkeit des Software-Testings liegt darin, dass bei vorhandenen Fehlern oder Bugs in der Software diese frühzeitig erkannt und vor der Auslieferung des Softwareprodukts behoben werden können. Ein ordnungsgemäß getestetes Softwareprodukt gewährleistet Zuverlässigkeit, Sicherheit und hohe Leistung, was zu Zeitersparnis, Kosteneffizienz und Kundenzufriedenheit führt.

Software-Bugs können teuer oder sogar gefährlich sein, weshalb Testing wichtig ist. Beispiele für Auswirkungen von Softwarefehlern reichen von einem Absturz des Bloomberg-Terminals in London bis zur Rückrufaktion von Nissan-Autos aufgrund eines Softwareversagens in den Airbag-Sensoren. Kostenersparnis, Sicherheit, Produktqualität und Kundenzufriedenheit sind einige der Vorteile von Software-Testing. Es gibt verschiedene Arten von Tests, darunter funktionales Testing, nicht-funktionales Testing (Leistungs- und Wartungstests) sowie verschiedene Teststrategien wie Einheitstests, Integrationstests und Systemtests. Insgesamt ist Software-Testing ein entscheidender Schritt im Softwareentwicklungsprozess.

Quelle: What is Software Testing?

E2E(End-to-End) Test

hjqueeen — Thu, 01 Feb 2024 08:40:56 +0000

E2E-Tests, auch End-to-End-Tests oder Benutzeroberflächentests genannt, sind eine Softwaretesttechnik, die die Software als Ganzes testet, um sicherzustellen, dass das gesamte System ordnungsgemäß funktioniert. E2E-Tests werden typischerweise nach Funktionstests und Systemtests durchgeführt.

E2E-Tests werden aus der Sicht des Endbenutzers simuliert und können mehrere Subsysteme wie Netzwerkkonnektivität, Webdienste, Datenbankkonnektivität und andere Anwendungen oder Abhängigkeiten umfassen. In einem E2E-Testszenario kann der Ausfall eines Subsystems zum Ausfall des gesamten Systems führen.

Der Grund, warum E2E-Tests wichtig sind, liegt darin, dass sie in der modernen Softwareentwicklung wichtig sind, weil alle Systeme miteinander verbunden sind und im Gegensatz zu Systemtests, die sich nur auf interne Systeme und Funktionen konzentrieren, E2E-Tests mehrere andere Komponenten im internen Netzwerk abdecken, wie z. B. Datenbanken und externe Ressourcen. Berücksichtigen Sie die Faktoren:

Im Gegensatz zum Unit-Test gibt es beim E2E-Test jedoch viele externe Variablen, die die Testergebnisse verfälschen können. Beispielsweise können Probleme mit dem Netzwerkzugriff, der Datenbankkonnektivität oder den Dateiberechtigungen auftreten.

Um einen E2E-Testfall zu erstellen, müssen Benutzerfunktionen erstellt und alle miteinander verbundenen Subsysteme aufgelistet werden. Anschließend müssen Sie die Bedingungen für jede Benutzerfunktion bestimmen und Testfälle für verschiedene Funktionen jeder Funktion schreiben.

Quelle: What is E2E testing?