Can testing be automated using the combination of JavaScript and Selenium?
I am not familiar with Java, Python, or C#, but I do have expertise in Front-End development.
Has anyone attempted this before? Is it challenging to implement? Are there any recommended approaches?
Considering the growing popularity of JavaScript, is it worth exploring automation testing with this technology?
Yes, Selenium actually offers Javascript bindings which can be accessed by visiting this link: https://www.seleniumhq.org/download/. (The latest version at the time of writing is 4.0.0-alpha.1)
Achieving automation with selenium and javascript is definitely possible.
To begin, ensure that you have the necessary language bindings for Selenium in Javascript installed and set up. You can refer to the official resources for this process here:
Javascript (Node) 4.0.0-alpha.1 Released on January 13, 2018 :
https://npmjs.org/package/selenium-webdriver
Official selenium javascript documentation:
https://seleniumhq.github.io/selenium/docs/api/javascript/index.html
For those skilled in JavaScript, an excellent option for UI end-to-end testing is Cypress.io. This framework provides unique ways to manipulate the DOM within the browser environment. By operating directly within the browser, Cypress can interact with all aspects of the browser, including the application being tested. It is particularly effective for developing web applications using modern JavaScript frameworks.
A comparison between Selenium and Cypress can be found here. Cypress utilizes Mocha and Chai for test writing, making it easily understandable for most JavaScript users and incredibly developer-friendly.
According to information on the official Selenium website, specifically in the Download Section, there are several Selenium Client & WebDriver Language Bindings available:
In my opinion, these 5 variants are the most commonly used when it comes to Selenium Clients for Automation Frameworks with Selenium.
While Selenium's GitHub documentation is valuable, a significant portion of online resources focus on Selenium (Java). This could be attributed to Java's widespread usage as a programming language, making learning easier. Additionally, the frequency of releases for the Selenium (Java) client supports this observation.
Personally, I have found Selenium's GitHub documentation for all client bindings to be comprehensive and accurate.
To utilize Selenium for tasks requiring browser automation using Javascript (Node), one can install Selenium via npm by running:
npm install selenium-webdriver
It is necessary to download additional components to work with major browsers. Chrome, Firefox, IE, Edge drivers are standalone executables that should be added to your system PATH. safaridriver ships with Safari 10 for OS X El Capitan and macOS Sierra. Remote Automation must be enabled in Safari 10's Develop menu before testing.
An illustrative example is provided below:
const {Builder, By, Key, until} = require('selenium-webdriver');
(async function example() {
let driver = await new Builder().forBrowser('firefox').build();
try {
await driver.get('http://www.google.com/ncr');
await driver.findElement(By.name('q'));.sendKeys('webdriver', Key.RETURN);
await driver.wait(until.titleIs('webdriver - Google Search'), 1000);
} finally {
await driver.quit();
}
})();
interface IRoleAddProps { roles: Array<IRole> } interface IRoleAddState { current: IRole | null } class RoleAdd extends React.Component<IRoleAddProps, IRoleAddState> { state = { current: null, } renderNoneSelect = () ...
I am looking to add a custom news button to the header of my shinyapp, which will display information from a specific dataset. I want the button to show the number of news items available, similar to how shinyDashboard::notificationItem() works but with mo ...
My goal is to dynamically generate a table displaying two different sets of data. Despite having verified returns from my database, the rendered page does not show the corresponding HTML elements as expected. Here is the template and HTML code: <templ ...
All day I've been struggling to find a solution for my isotope filtering issue. I'm using classes from the database to tag items, such as categories and dates, and allowing users to filter them. The tricky part is making these filters work like o ...
Trying to validate radio input to confirm if it's the correct answer, but encountering an issue where it skips the line if (answer == allQuestions[q].correctAnswer). Here is the complete code: https://jsfiddle.net/alcatel/sopfmevh/1/ for (let k = 0; ...
Looking to adjust the printer's head position using ESC / pos commands: ESC $ command sets the absolute horizontal position ESC $ nL nH Trying to figure out how to calculate the values for nL and nH? ...
I've hit a wall after trying numerous solutions. Here is the code I'm working with: HTML: import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styl ...
I am currently working on a website project where I have a specific requirement. I need the webpage to scroll towards the bottom when a particular text is clicked, using JavaScript/jQuery. <p class="ml-2 mb-2 d-flex view_profile_options"><a hre ...
I have developed a blog using Dashcode, incorporating HTML, CSS, and Javascript to pull data from an xml file. It's pretty simple... My perspective on this is: 1. JavaScript should be compatible with all browsers (with some variations). 2. I may need ...
My Robot Framework test cases are ready to go, but I'm facing a structure dilemma in my project setup. Here's how it looks: TestProject |__ TestScenarios |__ TestCategory1 |__ TestCategory2 |__ __init__.py |__ RunTest.py I have a sp ...
Trying to send multiple arrays to the controller using Ajax post. Initially, there is a model structured like this: public class EnrollmentOptionsVM { public virtual string OptionID{ set;get;} public virtual string UserChoice { set;get;} p ...
I am currently facing an issue with a function where the data is retrieved from the getValue() function. The following code snippet is a fragment. grid.js function gridLoadComplete(){ var data = getValue(); } Take into account the following H ...
Recently, I implemented a pop-up on my website that used cookies to prevent it from appearing every time a user visited a page. However, after making this change, the pop-up stopped showing altogether. Despite my best efforts in testing, researching, and s ...
Exploring a practical demonstration of sorting an array of objects based on multiple properties, the code implementation involves a while loop (refer to students1 in the snippet below). I attempted to streamline this process by using .forEach, but encounte ...
Being new to JavaScript and web development, I've been self-studying but have encountered many roadblocks. Currently, I'm struggling with understanding functions with callback functions and their parameters. The documentation I've read so f ...
The Image above shows the error and the code I have attempted.Server Error TypeError: Cannot read properties of undefined (reading 'map') This particular error occurred during the page generation process. Any console logs will appear in the term ...
<n-select v-model:value="value" :options="options" /> options: [ { label: "Every Person", value: 'file', }, { label: 'Drive My Vehicle', ...
I am facing an issue with my edit form, designed for admins to edit book details. Upon submitting the form, the values are updated in the database successfully. However, the page fails to load the updated values into the form without requiring a refresh/re ...
I'm trying to enhance my function that deals with uploaded images. Currently, it captures the image, converts it, and saves only one version of it on the server. However, I would like to modify it to achieve the following goals: Goals: Save multipl ...
Having an issue with my dot navigation and anchor links placement. I want the anchors to be vertically centered in the middle of the section, regardless of window size. Here's what I'm aiming for : For larger windows : And for smaller windows : ...