Create your first test case

The goal of this article is to go through creating a simple test with Frontend Robot. We will use the Live Editor to create the test and see its results in real-time. The test we want to create will use the popular TodoMVC app as a playground, we will create a new todo and then verify that it was created properly.

Open or create a test suite

A test case must be created into a specific test suite. So to get started, let’s select an existing test suite or create a new one as shown in the screenshot below.

Open Suite
Open Suite

Create a new test

Now, navigate to the suite’s Tests tab and click on New Test

Test tab
Test tab

Create new test
Create new test

Give your test a name

The new test has been created, now it’s time to give it a meaningful name. Since we are going to try Frontend Robot on the TodoMVC app, let’s call the new test TodoMVC.

Set test name
Set test name

To begin testing a website or web application we first need to navigate to its URL. That’s why the first instruction in a test is often a Go to URL instruction. In our case we want to navigate to https://frontendrobot.com/playground/todos/ which is the URL of our TodoMVC app.

So, let’s copy paste the following URL https://frontendrobot.com/playground/todos/ into the URL field and then click on Save & Next.

Navigate to URL
Navigate to URL

Sending the first Click instruction

If everything went well we should see the snapshot of the TodoMVC application appearing on the right side of the screen.

The page snapshot is a read-only view of what the remote browser sees after each command. Clicking and typing on the page will have no effect. The snapshot it’s meant to give you an idea of the effects of the commands you send and it will also provide an aid for generating selectors visually. Know more

OK, now let’s make sure that the focus it’s on the What needs to be done? field of the Todo app. Let’s create a new Click instruction then hover the mouse over the input field and then click to extract its CSS selector.

Click instruction

Click Save & Next to advance to the next step.

Sending key strokes

Now that the input field of the app has focus we can send some key strokes to create a new todo. Select the Keys instruction, then type Hello world into the field below. Then click on the little keyboard icon and select Return to simulate the pressing of the Return key.

Type instruction

Click Save & Next to advance to the next step.

Creating an assertion

After the instruction has finished executing, we should see a new todo being created in the page snapshot. By the look of it everything went well, but we want to automatically verify that the todo was actually created. To do that we need to create an assertion. Select the Element Exists instruction then hover the mouse over the newly created todo item and click to extract its selector.

Assertion instruction

Click Save & Next to complete the test.

Running the test in unattended mode

The basic test we set up to create in this tutorial should be now complete. We can now go back to the standard editor and try to run the test in unattended mode (as opposed to the interactive mode we just used to create the test). Click on the test name at the top-left corner of the screen to go to the test case overview, then click on the Run button.

The results of the run should come up in real-time and as expected all the steps should succeed.

Run in unattended mode

Simulating an error

Now let’s try to simulate an error in the test. Let’s imagine that for some reason the todo being created doesn’t match with the assertion we made at the end.

Let’s then edit the last instruction, and change Hello world into Hello moon. Then let’s run the test again and see what’s going to happen.

Simulate error

Of course, the assertion step failed because the runner couldn’t find the specified element. For transitivity the entire test has been marked as failed as well.

Conclusion

This article has just demonstrated the most basic capabilities of Frontend Robot. There is much more to know, so make sure to browse the docs for more insights.

Questions?

We're always happy to help with test creation or other questions you might have! Search our documentation, contact support by email or on chat, or connect with our sales team.