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
In your File explorer, create a folder on your local device → this will be your test project name
Go into the folder, select the navigation, replace with cmd and hit Enter
This will open up your terminal in the right folder. Type code . and hit Enter.
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:
Run the following command to create a new NPM project: npm init -y
Expected result:
Run the following commands to set up all the dependencies:
Install Testwise: npm i @thinkwise/testwise
Expected result:
Install TypeScript: npm i typescript
Expected result:
Initialize your TypeScript with the default settings: npx tsc –init -d
Expected result:
Initialize Playwright (choose all default options) npm init playwright
Confirm ‘y’
Press Enter on ‘Where to put your end-to-end tests?’ ‘tests’
Press Enter on ‘Add a GitHub Actions workflow?’ ‘false’
Press Enter on 'Install Playwright browsers?’ ’true’
Expected result:
Run the Testwise Install script to set up Testwise dependencies: npx testwise install
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”
Go to Testwise.json and change the baseUrl and the serviceUrl to the ones applicable to your Thinkwise environment
baseUrl should match your Universal login page
serviceUrl should match the Meta server URL up until indicium
Go to playwright.config.ts and adjust the from: // baseURL: 'http://localhost:3000', to: baseURL: `${testwiseConfig().get<string>('environmentSettings.baseUrl')}`,
On testwiseConfig press ctrl + . and choose to add the import from @thinkwise/Testwise (save your changes)
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:
Navigate to the ‘Testing’ tab and select ‘Record new’ (this will open up a browser for you to start recording actions)
Navigate to your application, log in, and perform the actions for your test case (close the browser when you are done).
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.
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');
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?
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! 💪
We use 3 different kinds of cookies. You can choose which cookies you want to accept. We need basic cookies to make this site work, therefore these are the minimum you can select. Learn more about our cookies.