QA Wolf logo

QA Wolf

/

Star

2.7k

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.

Create a 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.

Create test button

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

Enter URL

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.

Create a test in the browser

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.

Run a Test

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.

Run tests

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

View logs

Add a Snippet

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.

Choose element

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.

Click element

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

Add snippet

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.

Add snippet button

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

Run snippet

Run Selected Code

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.

Highlight line

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

Run 1 line

Toggle Code Creation

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.

Create code toggle

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.

Code creation turned off

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.

Conclusion

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

Now learn how to run your test: