Automated Testing of Azure Bot Directline WebChat Channel using Selenium Java

Web Automation Testing of your Azure Bot connected to Webchat using Directline channel using Selenium Java and chrome Web Driver in Eclipse IDE.

Prerequisites

Configure Selenium Java and JUnit Framework for Web Automation

Selenium Java Automated Testing of Azure Bot Directline Webchat Demo Video

Create JUnit Test Case

Right-click on the package -> New -> JUnit Test Case. If JUnit Test Case is not found there, go to New -> Other -> Java -> JUnit -> JUnit Test Case. Click on Next.

Create a new JUnit Test Case in the package for directline automated testing

Give the name of the class and click on Finish.

Sample Web Page For Azure Bot Connected using Directline Webchat

I have used the sample HTML code from the Bot Framework Webchat GitHub repository and replaced it with my Directline secret. I have also added few styling options such as background color, chat bubble, etc.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Web Chat: Customizing thru style options</title>
    <script type="text/javascript" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <style>
      html, body { height: 100% }
      body { margin: 0 }

      #webchat,
      #webchat > * {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="webchat"></div>
    <script>
      const styleOptions = {
        backgroundColor: 'Black',
        bubbleBackground: '#222',
        bubbleBorder: 'solid 1px #444',
        bubbleBorderRadius: 20,
        bubbleFromUserBackground: '#222',
        bubbleFromUserBorder: 'solid 1px #444',
        bubbleFromUserBorderRadius: 20,
        bubbleFromUserTextColor: 'White',
        bubbleTextColor: 'White'
      };

      // In this demo, we are showing how to initialize Web Chat with a secret. This is NOT RECOMMENDED for deployed bots.
      // Your client code must provide either a secret or a token to talk to your bot.
      // Tokens are more secure. To learn about the differences between secrets and tokens
      // and to understand the risks associated with using secrets, visit https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication?view=azure-bot-service-4.0

      // The code commented out below exemplifies how to implement the same page while fetching a token from your own token server.
      
      // const res = await fetch('https:YOUR_TOKEN_SERVER.NET/API', { method: 'POST' });
      // const { token } = await res.json();

      window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ secret: '<Enter Your Directline Secret Key Here>' }),
        // directLine: window.WebChat.createDirectLine({ token }),
        styleOptions
      }, document.getElementById('webchat'));
    </script>
  </body>
</html>

Chatbot Use Case

I will be testing an Echo Bot which is very basic for this implementation. The reason being, you can use my selenium script as a base and implement yours.

Echo Bot connected using Directline webchat response

Selenium Java Script to Test the Directline WebChat

Please find the below script for your reference. You can modify as you require. One good thing I noticed is XPaths of most of the directline channel is similar (Based on Bot Framework Webchat samples).

Feel free to modify the script to make it more optimized to perform better.

package com.test;

import static org.junit.Assert.*;

import java.util.ArrayList;

import org.junit.After;
import org.junit.AfterClass;
import org.junit.Before;
import org.junit.BeforeClass;
import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class BotTesting {
	
	WebDriver driver;
	String url = "file:///C:/Users/jdbots/Desktop/EchoBotStyle.html";

	@BeforeClass
	public static void beforeClass() {
		System.out.println("Inside before class method.");
	}
 
	@Before
	public void before() {
		//Set the key/value property according to the browser you are using.
		System.setProperty("webdriver.chrome.driver","C:\\Users\\jdbots\\Downloads\\chromedriver_win32 (1)\\chromedriver.exe");
		//Open browser instance
		driver = new ChromeDriver();
		//Open the AUT
		driver.get(url);
		driver.manage().window().maximize();
	}
 
	@Test
	public void test() throws InterruptedException {
		//Fetch the page title
		String pageTitle = driver.getTitle();
		System.out.println("Page title: " + pageTitle);
		Thread.sleep(5000);
		
		// Input Chat box element
		WebElement chatBox = driver.findElement(By.className("webchat__send-box-text-box__input"));
		//chatBox.sendKeys("help");
		//chatBox.sendKeys(Keys.ENTER);
		
		int transcriptCount = 1;
		int testCasesCount = 8;
		
		String responseXpath = "";
		
		// Test Message list
		ArrayList<String> messageList = new ArrayList<String>();
		messageList.add("");
		messageList.add("hello");
		messageList.add("");
		messageList.add("help");
		messageList.add("");
		messageList.add("jd bots");
		messageList.add("");
		messageList.add("hi");
		
		for (int i = transcriptCount; i <= testCasesCount; i++) {
			if (i % 2 == 0) {
				// Send Message from the list
				chatBox.sendKeys(messageList.get(i-1));
				chatBox.sendKeys(Keys.ENTER);
				Thread.sleep(3000);
			}
			else {
				// Test the response
				// Element xpath where response text is present
				responseXpath = "//li["+i+"]//div[@class='webchat__bubble__content']//div//p";
				
				// Get the response text
				String text = driver.findElement(By.xpath(responseXpath)).getText();
				// Print the response on the console
				String message = "Message - " + i + " = " + text;
				System.out.println(message);
				if (i == 1) {
					// Test Welcome message
					if (text.trim().equals("Hello and welcome!")) {
						System.out.println("Welcome Messsage Passed.");
					}
					else {
						System.out.println("Welcome Message Failed");
					}
				}
				else {
					// Test List Messages
					String text1 = "You said ‘" + messageList.get(i-2) + "’";
					if (text.trim().equals(text1)) {
						System.out.println(messageList.get(i-2)+" - Passed.");
					}
					else {
						System.out.println(messageList.get(i-2)+" - Failed.");
					}
				}
			}
		}
	}
 
	@After
	public void after() {
		//Close the browser
		driver.close();
	}
 
	@AfterClass
	public static void afterClass() {
		System.out.println("Inside after class method.");
	}
}