Web Automation Testing of your Azure Bot connected to Webchat using Directline channel using Selenium Java and chrome Web Driver in Eclipse IDE.
Prerequisites
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.

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.

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.");
}
}
You must be logged in to post a comment.