Tutorial: your first TDK test

🚧

TDK Feature

This is not supported in Testim's visual editor.

In this tutorial, we will create a full end-to-end test on a demo web application using the Testim Dev Kit.

🚧

Note: this tutorial assumes you have already installed Testim code locally, created your first project and linked it to your Testim account. If you haven’t, please go through our Getting Started guide first.

In this tutorial you will learn how to:

• Record a test in the Testim editor
• Export the test into code
• Edit the test in your own IDE
• Run the test and review the results

Record a test in the Testim editor

One of the advantages of using Testim code is the ability to leverage the Testim editor to quickly create tests using the built-in recording functionality.

To begin, log into your Testim account and click the "Create new test" button:

Once inside the editor, click the record button and enter demo.testim.io as the base URL:

The application will launch and a "We are now recording your test" message will appear. Testim will now record every action performed on the application.

Start by clicking the "Log in" button at the top-right. Then, enter a username and a password (you can use any values you like) and click the "Log in" button at the bottom:

Once back at the homepage, click ALT+V (or ⌥+V on Mac) to quickly add a text validation step and select the "Hello, John" greeting in the top-right corner.

📘

You can read more about the different validations which are available in Testim here.

Congratulations!!! You've just created your first test. You can now click the play button and run your newly created automated login test.

Next, we are going to export this test into code and make changes to the test directly from the IDE.

Export the test into code

In the previous chapter we've created a full, end-to-end login test in under a minute. Now, we're going to export this test into code so that we can edit, debug, and execute the test from our own development environment.

To export the test into code click the export to code button:

🚧

Note: exporting code directly into your local TDK directory requires an active dev kit connection agent in order to sync the test code and the smart locators data. You will be prompted to start one (if non is active) when you click the export to code button for the first time.

After clicking the export button, you will be presented with a code editor in which you'll be able to review and tweak your test code.

Once satisfied, click the save button in order to save the test code to your local TDK project.

Use simple-login.js as the filename:

📘

The test code will be saved in your local TDK project /tests directory along with the relevant smart locators data. You can read more about Testim's smart locators technology and the l() function in the working with locators guide.

Next, we are going to edit the test in our IDE to make it more reusable and maintainable.

Edit the test in your IDE

Start by opening your TDK project in your IDE (you can read more about the structure of a TDK project here).

You can see that a new file - simple-login.js- has been created inside the /tests directory.

"use strict";

const { go, resize, click, type, waitForText, test, l, Locator } = require('testim');

Locator.set(require('./locators/locators.js'));

test('untitled test', async () => {
  await go("http://demo.testim.io");
  await resize({
    width: 1024, 
    height: 680
  });
  await click(l("LOG_IN"));
  await type(l("[tabindex='1']"), '[email protected]');
  await click(l("[type='password']"));
  await type(l("[type='password']"), '[email protected][email protected]#hD');
  await click(l("[form='login']"));
  await waitForText(l("HELLO,_JOHN"), 'Hello, John');

}); // end of test

You can now change and update the code from inside your IDE just like any other file.

Next, we're going to run the test directly from the IDE and review the results in the Testim editor.

Run the test and review the results

You can run your tests from the terminal using the npm start command.

You can also debug and add breakpoints to your tests directly from the IDE just like you would regular code.

We provide pre-built configurations for both VSCode and WebStorm.

The results of your execution will be viewable in real time in the Testim editor just like any other Testim test. You can read more about Testim test results here.

Have fun writing tests!!