Tutorial: Run Your First End-2-End-Test with Botium and Kuki
This step-by-step tutorial shows how to use Botium Box to run your first end-2-end test. Featuring Kuki, the award-winning chatbot.
Try it out first - point your browser to https://chat.kuki.ai/ and have a chat with Kuki. Some observations that will come handy later:
- Kuki asks some questions upfront, and requires to accept Terms&Conditions
- As usual with chatbots, there is the text input field and the send button at the bottom
- Kuki's responses are shown in the central screen area
For running End-2End-Tests on Kuki, Botium will simulate the same user interaction that you just did manually. Let's start.
1. Register a new Chatbot
In Botium Box, choose the CHATBOTS menu and click the REGISTER NEW CHATBOT button. * Choose Kuki End To End as Chatbot Name * Select WebdriverIO (Selenium or Appium) as Connector/Chatbot Technology * Copy https://chat.kuki.ai/ into the Start Url field * We will provide our Webdriver script in the following steps, so leave selection Specify Custom Selenium Scripts and Selectors * Finally, click the SAVE button to continue
2. Setup Site Navigation
In the Chatbots list, click on Kuki End To End and open the Settings / Connector Settings section. You can remember that in order to actually start the conversation with Kuki, you had to
- click the I am new here button
- click the Accept Terms and Conditions button
- click the Just Chat button
In Botium Box, expand the Chatbot Widget Navigation Configuration and enter the Selenium selectors corresponding to the button clicks in the Navigation Button Selectors field - enter the text below and hit enter after each entry:
- //button[text()='I am new here']
- //button[text()='Accept Terms and Conditions']
- //button[text()='Just Chat']
Using the displayed text in Selenium selectors is usually a bad idea and should only be done as last ressort - better use css classes or element identifiers if available.
3. Choose Text Input Field
Now expand the Chatbot Widget User Input Configuration. Enter the Selenium selectors for the text input field and the send button:
- In the Input Element Selector field, enter #main-input input
- In the Send Button Selector field, enter //button[text()='Send']
A good way to find out about the Selenium selectors is to use a tool like the Chrome Developer Tools.
4. Identify Bot Response
Kuki is showing the response in those nice bubbles - we have to tell Botium to look out for those bubbles. Expand the Chatbot Widget Bot Response Configuration and enter .pb-chat-bubble__bot in the Chatbot Output Element Container Selector field.
5. Check Configuration
In order to actually see what's happening, expand the Screenshot Configuration and select On Bot Message in the Save Browser Screenshots field. Click on the SAY HELLO button to make Botium send a first hello to Kuki - we will quickly see the screenshot of Kuki website as well.
Finish configuration by closing this window and clicking the SAVE button.
6.Record First Test Case
We will now use the LIVE CHAT to record a first conversation with Kuki and save it as a first test case. Click the LIVE CHAT button, wait for Kuki to send a nice greeting and send her back a hello.
In the background, Botium launched an invisible headless browser and used the configuration from the previous step to forward your greeting message to Kuki and returning Kuki's response to you.
Click on SAVE TEST CASE and
- enter Kuki End To End Tests in the New Test Set Name field
- enter hello in the Test Case Name field
- click OK to save your first test case
Now head over to the Test Sets menu, find the Kuki End To End Tests we just created and open it. You can find the test case in the TEST CASES section.
Let's now run this single test case once by clicking on RUN CONVO and selecting Kuki End To End from the list. A few seconds later we will see the result output. In our case the test case failed. Why did it fail ? Because our test case script expected Kuki to answer Hello to you too! as she did when we recorded the script, now she was responding with It's my old friend! How's it going?.
7. Change Test Case
In Botium there are several ways to deal with alternating responses, but for now, let's just change the test case to accept anything as response from Kuki.
Back in the test case editor, click on the Hello to you too! bubble and clear the Enter text field. This will make the test case accept any input. Running the test case again will now be successful.
8. Create Test Project
You can now add additional test cases to the test set. In order to run all of these test cases at once, you have to create a TEST PROJECT. Choose the Start menu and click on Let's Go in the E2E Testing box.
On the first step of the Quickstart Wizard enter a test project name and choose Kuki End To End as chatbot. On the second step, select the Kuki End To End Test Set. And on the final step, select Headless Chrome as Device Set.
9. Run First Test Session
Finally, click the SAVE TEST PROJECT AND START TESTING button to launch your first automated test session.
Congratulations for your achievement, you now have a basic understanding how End-To-End-Testing with Botium works.