In this section, we will be using a simple modal popup created using http://www.w3schools.org/ and then we will write a script to handle that popup. The simple modal pop-up code is given next. We will build the HTML page first and then we will plug the CSS and JavaScript. We have kept the CSS and JavaScript external for the sake of simplicity:
<html>
<head>
<link rel="stylesheet" type="text/css" href="GetModal.css">
</head>
<body onload="test()">
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<frame name="MainWindow">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Login Form</h2>
</div>
<div class="modal-body">
<table id="credentials">
<tr>
<td>UserID</td>
<td><input type="text" id="userid"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" id="password"/></td>
</tr>
<tr>
<td><input type="button" id="ok" value="Ok"></td>
<td><input type="button" id="cancel" value="Cancel"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<h3>Login to Application</h3>
</div>
</div>
</frame>
</div>
</body>
<script src="GetModal.js"></script>
</html>
Next, we will look at the CSS. The CSS is used to give styling to our HTML. So let's look at the CSS for this HTML:
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen
size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Modal Header */
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
/* Modal Body */
.modal-body
{
padding: 2px 16px;
}
/* Modal Footer */
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0
rgba(0,0,0,0.19);
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@keyframes animatetop {
from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}
}
Now comes the final part of plugging in the JavaScript. Plug this in the HTML right before the ending script tag. The file should be named ModalPopup.html:
function test(){
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
All the pieces are separate from each other. It becomes an HTML page created using plain HTML with inclusions for CSS and JavaScript. Clicking the cross closes the popup. The page does not have functionality for the OK and Cancel buttons. It is just a dummy page for demo purposes.
The following code opens up the demo page, clicks on the button, and then a modal popup opens, after which a username and password are entered:
WebDriver driver = new ChromeDriver();
// driver.manage().window().maximize();
driver.navigate().to(
"C:\Users\pinakin.chaubal\Desktop\ModalPopup.html");
driver.findElement(By.id("myBtn")).click();
System.out.println(driver.findElement(By.tagName("body")).getText());
driver.findElement(By.id("userid")).sendKeys("testuser");
driver.findElement(By.id("password")).sendKeys("testpass");