Skip to main content
Tutorial

Tutorial 101: Hello Testwise

  • July 11, 2025
  • 1 reply
  • 137 views
Tutorial 101: Hello Testwise
Forum|alt.badge.img
  • Community Manager
  • 1 reply

This is a follow-up to the Testwise introduction blog, read that first for the necessary context:

Disclaimers: 

  • While a Record & Playback approach is a great way to start from having no automated tests, it does have a couple of disadvantages, some of which can be mitigated by replacing recorded steps with Testwise-provided reusable logic and helpers. 
  • Some of below steps are going to change when we automate steps that are currently being performed manually
  • Depending on the versions you install; steps might differ 

Prerequisites:

  1. Install Visual Studio Code on Windows
  2. Install Node.js — Run JavaScript Everywhere
  3. In your File explorer, create a folder on your local device → this will be your test project name
     
  4. Go into the folder, select the navigation, replace with cmd and hit Enter
  5. This will open up your terminal in the right folder. Type code . and hit Enter.
  6. This will open up Visual Studio Code. In there press Ctrl + ~ which will open up the Terminal within Visual Studio Code, already pointing to your Test project folder:

 Setup project dependencies:

  1. Run the following command to create a new NPM project:
    npm init -y

    Expected result:
  2. Run the following commands to set up all the dependencies:
    1. Install Testwise:
      npm i @thinkwise/testwise
       
      Expected result:

       

    2. Install TypeScript:
      npm i typescript

      Expected result:

    3. Initialize your TypeScript with the default settings:
      npx tsc –init -d

      Expected result:

    4. Initialize Playwright (choose all default options)
      npm init playwright
      1. Confirm ‘y’
      2. Press Enter on ‘Where to put your end-to-end tests?’ ‘tests’
      3. Press Enter on ‘Add a GitHub Actions workflow?’ ‘false’
      4. Press Enter on 'Install Playwright browsers?’ ’true’
        Expected result:
    5. Run the Testwise Install script to set up Testwise dependencies:
      npx testwise install
  3. Go to package.json and add:
    “type”: “module”,

    Then save your change

    Note: if a “type” key already exists, make sure to update the key value to “module”

     
  4. Go to Testwise.json and change the baseUrl and the serviceUrl to the ones applicable to your Thinkwise environment
    1. baseUrl should match your Universal login page
    2. serviceUrl should match the Meta server URL up until indicium
  5.  Go to playwright.config.ts and adjust the from: 
    // baseURL: 'http://localhost:3000',
    to: 
    baseURL: `${testwiseConfig().get<string>('environmentSettings.baseUrl')}`,​​​
     
  6. On testwiseConfig press ctrl + . and choose to add the import from @thinkwise/Testwise (save your changes)
  7. Search for Playwright Test for VSCode in extensions and install it
     

    NOTE: you might have gotten the suggestion in VS Code to install this particular extension already. Pressing ‘Install’ there replaces step 7:

Now you’re all set, time to create your first test!

Create first test:

  1. Navigate to the ‘Testing’ tab and select ‘Record new’ (this will open up a browser for you to start recording actions)
  2. Navigate to your application, log in, and perform the actions for your test case (close the browser when you are done).
  3. You will now have a very linear test script from the record and playback functionality in playwright. Changing this to a structured test script is out of scope for this introduction but we will clean the script up by using Testwise.
  4. In the import on line 1, remove ‘test’ from the import, then add the following import:
    import { test } from '@thinkwise/testwise'

    Then remove all steps that are part of the login process and replace it with: 
    await page.logInWithCredentials('username', 'password'); 
     

  5. Run your test:

If your test is passing then you have successfully hooked up to the Testwise library. Congratulations!

So what is next?

We will release detailed documentation on how to use the tool, but you could take things further by now replacing steps in your linear script with common components. 

You would first initialize a component like this (a component can also have a set context, but we will not get into that here):
const actionBar = new Actionbar(page);

Then we can replace steps such as this:
await page.getByTestId('actionbar__add').click();

With component actions:
await actionBar.getAddButton().click();

And end up with something like this:

test('Should not allow user to create duplicate tenants', async ({ page }) => {

  // Arrange

  await page.logInWithOptions(options);

  const actionBar = new Actionbar(page);



  // Act

  await page.getByTestId('listbar__authorization').click();

  await page.getByTestId('listbar__authorization__item__0').click();

  await actionBar.getAddButton().click();

  await page.getByTestId('form-field__tenant-name__input').fill('This is a test');

  await actionBar.getSaveButton().click();



  // Assert

  await expect(page.getByTestId('popup__tsfmessage__content__title')).toContainText('Cannot insert or update the row because a row with the same values already exists in \'Tenant\'. Please adjust the values to be unique and try again.');

});

We are not quite ready to commit this script to our codebase. As you can see we are using the AAA pattern, but we need to take this one step further, and apply the POM pattern, to promote reusability and maintainability of our tests and test artifacts. We will however cover these topics in future posts as well as covering many other useful topics.

Did this topic help you find an answer to your question?

1 reply

Arie V
Community Manager
Forum|alt.badge.img+12
  • Community Manager
  • 1064 replies
  • July 14, 2025

Not sure about other readers, but as a not-so-technical person the above number of steps and lines of code makes me hesitant to even give it a try. However, I did ask ​@Nathan to dumb it down sufficiently for me as a QA newbie to grasp it. This is supposed to work for me, so I gave it try and after some trial-and-error it proved surprisingly easy to get it working!

I first setup all Prerequisites and Project dependencies:

  • On step 4 I had to double-check my serviceUrl a few times as it should not include the /iam/iam part
  • On step 7 got the recommendation by VS Code at the bottom right to install the Playwright Test for VSCode extension, so didn’t go to the Marketplace.

Then started Recording:

The recording resulted in below script (deleted 2 lines for clarity due to a wrong Ctrl+V):

Then cleaned up the script according to the Tutorial 101 recommendations:

Had to add a delay in line 12, else running the test failed. Note that we aim to fix this on the Universal GUI side in the near future.

Then ran the test using the Debug Test button and it worked!

 

✅ I scored a green checkbox! 

And if I can do it, I’m certain most of our Community can pick this up just as easily! ​💪

@Suleyman are you next up for the challenge? 😆


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings