F • RCreate 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.
Create a new test
Now, navigate to the suite’s Tests tab and click on 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.
Navigate to a URL
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.
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 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 Send 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.
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.
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.
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 Mars. Then
let’s run the test again and see what’s going to happen.
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.