Your first test
This guide will show you how to create your first test scenario using Magic Inspector. We'll take a real-world example and start by testing the authentication flow of our website.
Prerequisites
There is no need to install anything. You can start creating tests immediately after creating an account.
If your infrastructure is not public, you will need to authorize our IPs and user agent to access your website. You can read more about it in the security section.
Create the test
Once connected to your dashboard, you can create your first test using the Create a new test card.
Simply add the start URL and a name for your test (you can change them later).
In this example, we'll want to test the authentication flow of our website, so we'll use the following parameters:
- Start URL: https://www.magicinspector.com
- Test name: I can authenticate.
Then, we'll click on the Create test button.
Add an instruction
Once the test is created, you'll be redirected to the test editor, we'll discover the different elements of the page and create our first instruction in this guide.
Tests are made of instructions. An instruction is an action that the AI will perform during your test.
In our case, we want to click on the Login button of our website.
So we'll use the Click Element instruction.
This action requires you to describe the element you want to click on.
The description of the element is made in natural language, and the AI will use it to find the element in the page.
So in our case, we'll just write "The login button", and it will automatically find the element in the page.
Run your test
Once you've created your test, you can run it immediately by pressing the Run Scenario button.
As you can see in the following screenshot, when your test is running, the left panel shows the current running instruction (1). The right panel (2) shows what the AI is doing step by step (here you can see the AI is clicking on the login link). The bottom right panel (3) shows the log results of the test in real-time.
Once our test is finished, the left panel indicates us the status of the test. Here, our test passed, cong
Add an AI Visual Assertion
We can use the Back to edition mode button to add more instructions to our test.
If we want, we can add an AI Visual Assertion to verify that we are on the login page.
Click on the + icon to add a new instruction, then select the AI Visual Assertion instruction.
As description, we just need to write "We are on the login page and it's asking for an email and a password".
Then, let's run the test again.
As you can see, the test assertion passed and the AI explains its reasoning in the logs panel.
What's next?
Congratulations, you've just created your first test and added your first assertion!
In the next sections, we'll learn how you can leverage variables and reusable tests to create more complex scenarios.
Great, you're now set up with an API client and have made your first request to the API. Here are a few links that might be handy as you venture further into the Protocol API:
More advanced guides
Using DOM & Vision AI models
Learn the difference between DOM and Vision AI models and how to use them for testing.