Processing Pop-up Alerts and Confirmations with Selenium and Cloud Testing

Posted by Phil Smith - Cloud Testing
July 17, 2009

This article covers the basics of how Selenium handles pop-ups, as well as how to test them using the Cloud Testing service. Future articles will cover the advanced details of handling Alerts and Confirmations.

What are Alerts and Confirmations?

The following very basic page will use Javascript to display either an Alert (which only has an OK button), and a Confirmation (which has an OK and Cancel buttons), depending on which button is clicked on the page.

<html>
<head>
<title>Cloud Testing Pop-up example</title>
</head>
<body>

<h1>Cloud Testing Pop-up example</h1>
<form action="">
<input type="submit" value="Display Alert"
    onClick="alert('Cloud Testing Alert')">
<input type="submit" value="Display Confirmation"
    onClick="confirm('Cloud Testing Confirmation?')">
</form>
</html>
 

Example Code 1

When displayed in a browser, the following web page is displayed:

popup1

Alert

Clicking on the ‘Display Alert’ button will result in the following Alert box being displayed:

popup2

A single OK button is displayed, along with a warning triangle icon (with slightly different implementations in various browsers).

Confirmation

Clicking on the ‘Display Confirmation’ button will result in the following Confirmation box being displayed:

popup3Two buttons are displayed – OK and Cancel, along with an information/question icon (with slightly different implementations in various browsers).

Processing with Selenium

The following commands are available within Selenium for processing Alerts:

The …AlertPresent() and …AlertNotPresent() functions check for the existence or not of an alert – regardless of it’s content.

The …Alert() functions allow the caller to specify a pattern which should be matched.

The getAlert() method also exists in Selenium RC, and returns the text from the previous Alert displayed.

Similar functions are also available for Confirmations.

IMPORTANT NOTE:

Because of the way that Selenium works, any alerts or confirmations that are displayed before the onLoad() method in the page cannot be caught. An example of this

<html>
<head>
<title>Cloud Testing Alert example</title>
</head>
<body>

Displayed before the alert.

<script>
alert('Cloud Testing Alert');
</script>

<br />Displayed after someone clicks OK on the alert.

</body>
</html>

Example Code 2

When viewed in a browser – Google Chrome in this case, the Javascript that displays the alert is processed while the page is loading, and the page will not be fully displayed until the OK button is clicked and the dialog box dismissed.

popup4

The page can now be fully rendered, with the second line of text now displayed:


popup5

Processing with Cloud Testing

To illustrate some of the features of the Cloud Testing service, I have created and uploaded the following script – click to see the full size version:

When this script is run against the page in Example Code 1 above, we get the following results:

Results for pop-up test - click for full size image

Explanation of the Test:

Step 1:

This opens the sample page – successfully.

Step 2:

Click on the ‘Display Alert’ button – again successfully.

Step 3:

Producing a screenshot at this time will not show the Alert dialog box – it is intercepted by Selenium and never displayed.

Step 4:

The ‘Get Alert‘ function returns the text of the last Alert – in this case ‘Cloud Testing Alert’, as displayed.

Step 5:

The ‘Verify Alert‘ function fails at this point, as there are no outstanding Alerts – the previous call in effect clicked OK.

Step 6:

Here we click the ‘Display Alert’ button again, for the next part of the test.

Step 7:

This time the ‘Verify Alert‘ function succeeds.

Step 8:

Here we click the ‘Display Alert’ button again, for the next part of the test.

Step 9:

The ‘Verify Alert’ function fails, as the expression we have passed (‘Cloud Testing Confirmation’) is not what is present in the alert.

Further Information

For further details of the Cloud Testing service visit the website at www.cloudtesting.com

Cloud Testing, Javascript, Selenium,

Did you enjoy this post? Why not subscribe to our feed and get articles like this delivered automatically to your feed reader.

Comments

No comments yet.

Leave a comment

(required)

(required)