CypressAndSeleniumJSTutorial < Automation

You are here: Ultra Guide>Automation Web>CypressAndSeleniumJSTutorial (04 Jun 2021, BenRosner)Edit AttachTags

In this tutorial we will be going over how to use the Cypress testing framework with JavaScript.

Cypress

First off, we want to be sure we have a code editor/IDE installed. I personally use VSCode: https://code.visualstudio.com/Download . Even though it is a Microsoft product, it is cross-platform, meaning it is available for Windows, Mac and Linux.

Then we want to:
Create a new folder using the command in your Terminal:

mkdir cypress-tutorial && cd $_

The command mkdir translates to "make directory", so the command will make a new folder called cypress-tutorial. The "cd" means "Change Directory" and the "$_" means that the current directory will be changed to the one that was created in the mkdir command. In this case, that is cypress-tutorial. We then want to execute this command:

npm init -y

This command initiates NPM which is the node package manager. It is the tool we use to install dependencies in JS. (You could also use Yarn, but for this tutorial, we will stick to NPM.) You can read more about NPM here: https://www.npmjs.com/ If you're familiar with Gems in Ruby, this is the same concept. Inside the folder we want to create two new files. The first is an HTML document called index.html The code should look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Cypress tutorial for beginners</title>
  </head>
  <body>
    <main>
      <form>
        <div>
          <label for="name">Name</label>
          <input type="name" required name="name" id="name" />
        </div>
        <div>
          <label for="email">Email</label>
          <input type="email" required name="email" id="email" />
        </div>
        <div>
          <label for="message">Your message</label>
          <textarea id="message" name="message" required></textarea>
        </div>
        <div>
          <label for="password">Your message</label>
          <input type="password" required name="password" id="password" />
        </div>
        <div>
          <button type="submit">SEND</button>
        </div>
      </form>
    </main>
  </body>
  <script src="form.js"></script>
</html>

This is a form in HTML. The differentt tags representt the differentt elements on the page. As you can see, we have our form tag which contains the elements of the form. Some of these tags also have attributes which are useful in automating testing processes, specifically class and id attributes. The second file you will be creatting is a JavaScript file. This should be called form.js. The JS code is below:

const form = document.forms[0];

form.addEventListener("submit", event => {
  event.preventDefault();
});

Const is the keyword we used to declare a variable in JS. We could use let as well, but since we want the form variable to remain constant, or not change its value, we will stick to using const. Do not use the keyword var, as that is deprecated. (No longer used) Think of it as "old fashioned," or "out of date." The value of form:

document.forms[0];

means that in the HTML document, we want to take the firstt value of the forms array.

The method

addEventListener

takes a function as an argument and then waits for a certain event. When that event occurs, the function runs. So, in this case, when the form is submitted, the code inside the function is run. In this case, that line of code tells the computer that its default action should not be taken as it normally would be.

Now we get into installing Cypress. To install cypress, run this command in your Terminal.

npm i cypress --save-dev

Then, we want to run

node_modules/.bin/cypress open

This will launch Cypress. New folders should appear in your project, and that's ok! We want them to be there. You can now safely remove the example folder. Close the window. Now to launch the project. Run this command using your Terminal:

npx serve

We should now be running a server on our default port with the form we created displaying on screen. Now time to write our first group of Cypress tests. We should create a new file in cypress/integration/form.spec.js and write our first test:

describe("Form test", () => {
  it("User can fill form", () => {
    cy.visit("/");
    cy.get("form");
  });
});

The describe method is one you will become very familiar with. It combines multiple related test actions into a group. Cy is Cypress in this case, and then the visit and get methods tell Cypress to visit the root page and then get the data from the form.

Let's now write a few more tests. In our SPEC file, let's edit the file and insert this code:

cy.get('input[name="name"]')
      .type("Ben")
      .should("have.value", "Ben");

    cy.get('input[name="email"]')
      .type("brosner@ultranauts.co")
      .should("have.value", "brosner@ultranauts.co");

    cy.get("textarea")
      .type("Welcome to Ultranauts!")
      .should("have.value", "Welcome to Ultranauts!");

What we're doing here is automatically inputting "Ben" for the name field, "brosner@ultranauts.co" for the email field and "Welcome to Ultranauts!" in the message field. It then verifies thatt these fields were filled correctly.

And there you have it! You've run your first Cypress tests!

Selenium

Selenium is an automation tool, similar to Cypress. Unlike Cypress, which is only used in JavaScript, Selenium can be used witth a number of languages. However, Selenium isn't quite as readable and is a bit more complex to understand than Cypress. We won't need the HTML file for this example that we used for Cypress. Create a new JS file called auto.js. We then will install Selenium WebDriver by running the following command in your Terminal:

npm install -save selenium-webdriver

We now have Selenium installed. Then let's input the code in our .js file:



const webdriver = require(‘selenium-webdriver’);
const chrome = require('selenium-webdriver/chrome');

const browser_name = new webdriver.Builder();

withCapabilities(webdriver.Capabilities.chrome()).build();

browser.get(‘http:/www.ultranauts.co’);

const promise = browser_name.getTitle();

promise.then(function(title) 

{

console.log(title);

});

browser.quit();

This code will go to the Ultrananuts home page and then log to the console the title of the page. Now run the code using the Terminal command:

node auto.js

Now you're ready to test using either Cypress or Selenium! Good luck!

-- BenRosner - 02 Jun 2021

Topic revision: r5 - 04 Jun 2021, BenRosner

Automation

PUBLIC WEB