Online Shop Login
The following tutorial shows how to automate the login process of a simple demo online shop.
Setup
- Follow the AskUI installation guide and write your first instruction
- Open a browser on your screen
- If you have multiple screens, configure the used display by setting the display variable at
test/helpers/askui-helper.ts
- If you have multiple screens, configure the used display by setting the display variable at
Code
After running the npx askui init
command as described in the setup you will have a file test/my-first-askui-test-suite.test.ts
. In this file add a new workflow (it
-code-block) inside the body of the callback passed to the describe
function:
describe(/* a string identifying the test suite */, () => {
... (other workflows)
it('Should log into account', async () => {
});
});
1. Open the Demo Shop
First we need to open the demo shop in the browser. For that we open the browser and then type the URL into the search bar and hit enter.
it('Should log into account', async () => {
// First open the browser.
// If it is already open it should focus the current window
// macOS: open -a 'Google Chrome'
// Windows: start chrome
await aui.execOnShell("start chrome").exec();
// Open a new tab
// macOS: command + t
// windows: control + t
await aui.pressTwoKeys('control', 't').exec();
// Click the textfield or URL bar that contains
// the text 'Search Google or type a URL'
await aui.click()
.text()
.withText('Search Google or type a URL').exec();
// Type the text into the focused element
await aui.type('https://askui-demo-shop-6e358.web.app/').exec();
// Navigate to the website
await aui.pressKey('enter').exec();
});
When you run this code with npm run askui
, you should see the demo online shop opening in the browser you opened.
2. Navigate to the Login Dialog
Next, to open the login dialog, we need to click the text login at the top of the page. We can do this with the following instruction:
it('Should log into account', async () => {
...
await aui.clickText({text: 'Login', type: 'similar'});
});
3. Fill out Login Information
After opening the login dialog, we need to enter an email address and a password. For this we will use the typeIn
action. After filling in an email address, depending on the browser used the textfield may open an auto-complete drop-down that overlaps with the password field:
To keep the password field visible, we have to hide the auto-complete drop-down. In order to do this, we have to blur the email input field. We do this by clicking on the headline of the page ("Login"). Afterwards, we can type into the password field.
it('Should log into account', async () => {
...
await aui.typeIn('test@askui.com').textfield().contains().text('Email Address').exec();
await aui.click().text('Login').above().textfield().exec();
await aui.typeIn('passwort').textfield().contains().text('Password').exec();
});
4. Click on Login Button
After filling in email and password, we need to click the login button. The following instruction does that for us:
it('Should log into account', async () => {
...
await aui.clickButton({label: 'Log in'});
});
5. Check whether Login worked & Log out
Finally, we need to check whether the login worked. We can do this by checking if the text "Logout test@askui.com" is displayed in the header as this is only displayed if we are logged in. We complete the workflow by logging out so that the workflow can be rerun without having to log out manually.
it('Should log into account', async () => {
...
await aui.expect().text('Logout test@askui.com').exists().exec();
await aui.clickText({text: 'Logout test@askui.com', type: 'similar'});
});
Result
The following code block shows the finished code for the login of the web shop:
it('Should log into account', async () => {
// First open the browser.
// If it is already open it should focus the current window
// macOS: open -a 'Google Chrome'
// Windows: start chrome
await aui.execOnShell("start chrome").exec();
// Open a new tab
// macOS: command + t
// windows: control + t
await aui.pressTwoKeys('control', 't').exec();
// Click the textfield or URL bar that contains
// the text 'Search Google or type a URL'
await aui.click()
.text()
.withText('Search Google or type a URL').exec();
// Type the text into the focused element
await aui.type('https://askui-demo-shop-6e358.web.app/').exec();
// Navigate to the website
await aui.pressKey('enter').exec();
await aui.clickText({text: 'Login', type: 'similar'});
await aui.typeIn('test@askui.com').textfield().contains().text('Email Address').exec();
await aui.click().text('Login').above().textfield().exec();
await aui.typeIn('passwort').textfield().contains().text('Password').exec();
await aui.click().button().contains().text('Log in').exec();
await aui.expect().text('test@askui.com').exists().exec();
await aui.clickText({text: 'Logout test@askui.com', type: 'similar'});
});
To run this code use the npm run askui
command.