teststudio
TutorialsGetting Started with TestStudio

Getting Started with TestStudio

Learn the basics of TestStudio and create your first automated test.

Sarah Johnson
15 min
Beginner
Tutorial Video
1

Installation

The first step is to install TestStudio on your machine. TestStudio supports Windows, macOS, and Linux.

Windows Installation

  1. Download the TestStudio installer from our downloads page.
  2. Run the installer and follow the prompts.
  3. Once installation is complete, launch TestStudio from the Start menu.

macOS Installation

  1. Download the TestStudio DMG file from our downloads page.
  2. Open the DMG file and drag TestStudio to your Applications folder.
  3. Launch TestStudio from your Applications folder.

Linux Installation

  1. Download the TestStudio AppImage from our downloads page.
  2. Make the AppImage executable with chmod +x TestStudio.AppImage.
  3. Run the AppImage to launch TestStudio.
2

Creating a New Project

After installing TestStudio, the next step is to create a new project to organize your tests.

  1. Launch TestStudio and click on "New Project" from the welcome screen.
  2. Enter a name for your project, e.g., "My First Test Project".
  3. Select a location to save your project.
  4. Click "Create" to create the project.

Tip: Organize your projects by application or feature to keep your tests manageable.

3

Capturing Your First Element

Now that you have a project, let's capture your first web element using the TestStudio browser extension.

  1. Click on "Install Browser Extension" in TestStudio and follow the prompts to install the extension for your browser.
  2. Once installed, create a new Page Object by clicking "New Page Object" in TestStudio.
  3. Enter the URL of the page you want to test, e.g., "https://example.com".
  4. Click "Capture Elements" to open the page in your browser.
  5. Use the browser extension to select elements on the page by holding Alt (Option on Mac) and clicking on the element.
  6. Give each element a descriptive name in the extension.
  7. Click "Save" to add the elements to your Page Object.
// Example Page Object
const loginPage = {
  usernameField: "#username",
  passwordField: "#password",
  loginButton: ".login-button"
};
4

Creating Your First Test Script

With your Page Object created, you can now create your first test script.

  1. In TestStudio, click on "New Test Script".
  2. Select the Page Object you created in the previous step.
  3. Use the visual test builder to create your test:
  • Drag the "Navigate" action to your script and set the URL.
  • Drag the "Type" action to your script, select the username field, and enter a test username.
  • Add another "Type" action for the password field.
  • Add a "Click" action for the login button.
  • Add an "Assert" action to verify that login was successful.

Your test script should look something like this:

// Example Test Script
test("Login Test", async () => {
  await navigate("https://example.com");
  await type(loginPage.usernameField, "testuser");
  await type(loginPage.passwordField, "password123");
  await click(loginPage.loginButton);
  await assert.visible(".welcome-message");
});
5

Running Your Test

Now that you've created your test script, it's time to run it and see it in action.

  1. In TestStudio, click on the "Run" button in the test script editor.
  2. Select the browser you want to run the test in (e.g., Chrome, Firefox).
  3. Click "Start" to begin the test execution.
  4. Watch as TestStudio automatically executes your test steps.
  5. Once the test is complete, you'll see the results in the TestStudio UI.

Note: If your test fails, check the error message and review your selectors to ensure they're correct.

What's Next?

Implementing the Page Object Pattern

Learn how to create maintainable tests with the Page Object pattern.

Data-Driven Testing with TestStudio

Master data-driven testing to create flexible and reusable test scripts.

Tutorial Steps

Prerequisites

  • Basic understanding of web development
  • Familiarity with HTML/CSS