Create a Test

QA Wolf helps you create tests fast.

You can get started right from the browser, with no installation or setup required. QA Wolf also converts your actions to Playwright test code, so you don't have to spend time writing boilerplate or learning a test framework.

In this tutorial, we'll create our first test.

If you haven't already, sign up for QA Wolf.

To create a test, click the "Create test" button in the top right corner of the dashboard.

Enter the URL you want to test in the popup. In our example, we'll create a test on TodoMVC. Then click the "Create test" button to create your test.

Note: If you want to test a local URL like localhost:3000, you need to use our local runner. See this guide to learn how.

After the page loads, go through the workflow you want to test in the browser on the right side of the editor. In our example, we 1) create a todo item, 2) complete it, and 3) clear completed todos.

As you use your site, your actions are converted to Playwright test code on the left side of the editor. You can edit this code as you like, and you have full access to the Playwright API.

Now that we have our test, let's run it by clicking the "Run test" button at the bottom of the code pane. You can also press ⌘ + Enter (or Ctrl + Enter) to run your test.

As your test runs, the current line of code is indicated by paw icon. A green checkmark appears next to passing lines and a red "X" appears next to failing lines.

You can view the logs from your test by clicking the "Logs" tab of the code pane.

If you want more control over the generated code, you can use "snippets".

Snippets allow you to choose an action and a selector for an element. For example, you can create a snippet to assert text is on the page, upload an image, or fill in a test email address.

Let's add a snippet to assert that the text "React" appears on the page. Start by clicking the "Choose element" button above the right corner of the browser.

Next choose which element you want to generate a snippet for by clicking on it. In our example, we select the "React" text in the top left corner of TodoMVC by clicking on it.

Finally, choose the desired action and selector (if applicable) in the snippet widget. In our example, we choose the action "Assert text".

The snippet widget shows the code that will be added. After we click the "Add snippet" button, the following line of code will be added:

await assertText(page, "React");

Click the "Add snippet" button to add your snippet.

The snippet will then be added and ran. Our assertion passed!

Instead of re-running your test every time you make a change, you can run specific lines of code.

Let's run our assertion again to confirm that it works. Start by highlighting the last line of code in the code editor.

The run button now says "Run 1 line". Click the run button or press ⌘/Ctrl + Enter to run the selected code.

As you use your site, QA Wolf converts your actions to test code. You can turn auto code creation on or off depending on your needs.

Above the browser, there is a toggle with the label "Create code". When this toggle is set to on, your actions will be converted to test code.

When the create code toggle is set to on, you'll notice that the comment below is added to your test code:

// 🐺 QA Wolf will create code here

This comment tells QA Wolf where to insert new test code. If you want to insert test code in a different place (like in the middle of your test), move this comment where you want the new test code to go.

If you delete the // 🐺 QA Wolf will create code here comment, you'll notice that the create code toggle is set to off. Turn the toggle on again to add this comment back to your code.

Clicking on the toggle also turns off auto code generation. Now when you use your site, your actions will not be converted to test code.

You can turn code creation on and off as often as you like.

One caveat is that code generation does not work while a test is running. QA Wolf will wait until your test passes or fails before converting additional actions to code.

Congratulations - you've created your first test with QA Wolf! 🎉

Now learn how to run your test:

• on a schedule
• on Vercel deployment
• on Netlify deployment
• by calling the QA Wolf API