Creating your first test

Creating your first test

If you started with the Initial Setup wiki then close that project for now. We'll get back to the project in later lessons.

Create a new project in VSCode

1. Clicking on the Explorer icon
2. Click the "Open Folder" button
3. Navigate to the directory where you want your new project
4. Right click and create a new folder called "testcafe-tutorial"
5. Click "Select Folder"
6. Create a new file and call it "simple-test.js"

Install TestCafe in the new project (locally)

1. Create a new file called package.json. This will contain information about your project that npm can use.
2. Add the following information into the JSON file. You might want to change the author and TestCafe version to the latest.

{
  "name": "testcafe-tutorial",
  "version": "1.0.0",
  "description": "Tutorial of TestCafe",
  "author": "Ryan Quellhorst",
  "dependencies": {
    "testcafe": "^0.19.2"
  }
}

3. Open the terminal by using the shortcut (Ctrl + ~) or you can open the terminal by going to View -> Integrated Terminal
4. In the terminal, type npm install and click Enter. This will install a local version of TestCafe and create a package-lock.json file and a node_modules folder will all of the TestCafe dependencies.

Creating your first test

1. In the simple-test.js file do the following steps.
2. Lets first import the selector module that we'll be using later by typing

const {Selector} = require('testcafe')

3. In TestCafe, tests are organized into fixtures, so a fixture needs to be called before the first test. Add the following line. Note the punctuation marks around the fixture name are backticks (`) and not apostrophes (').

fixture `First Test`

4. Next we need to create the test function where are the steps of our test will be executed. Add the following line.

test('First test - Visit Website', async function(t){
    // Test steps
});

5. Lets add a step to our test. This step will navigate to the page we'll use for upcoming exercises. Amend the test function to the following.

test('First test - Visit Website', async function(t){
    await t.navigateTo('http://www.globalsqa.com/samplepagetest/')
});

If you followed the last steps correctly the entire file should look like this

const {Selector} = require('testcafe')

fixture `First Test`

test('First test - Visit Website', async function(t){
    await t.navigateTo('http://www.globalsqa.com/samplepagetest/')
});

Running your first test

1. Open the terminal if not already open.
2. Type testcafe chrome simple-test.js
3. Press Enter
4. You should see the chrome browser pop up and navigate to the site

Note: You can change the browser that TestCafe uses; click here for more information.

http://www.globalsqa.com/angularJs-protractor/Multiform/#/form/profile