Processing Javascript with Selenium

Matt Rees - Cloud Testing — Thu, 03 Dec 2009 10:34:49 +0000

To allow you to create dynamic testing scripts, i.e. ones where the information entered onto forms, such as dates change over time, Cloud Testing has implemented the processing of JavaScript.

Stored Variables

The commands store, storeValue and storeText can be used to store a variable value for later.

Store	javascript{var d=new Date(); d.toString()}	dateToday
Store	javascript{var d=new Date(); d.setDate(d.getDate() + 1); d.toDateString();}	dateTomorrow
Store	javascript{var d=new Date(); d.setDate(d.getDate() + 40); d.toDateString();}	date40days
Store	Plain text string	variableName

These variables are stored internally in a map called “storedVars”, with values keyed by the variable name, which can be accessed as follows:

storedVars['date40days']

JavaScript

All parameters or arguments for Selenium commands can be constructed using both simple variable substitution as well as full JavaScript. They both have access to the variables stored above, but in different ways:

Full JavaScript – javascript{…}

Javascript evaluation provides the full power of JavaScript when constructing a parameter or argument for a Selenium command. To use this mechanism, the entire parameter value must be prefixed by ‘javascript{‘ with a trailing ‘}’. The text inside the braces is evaluated as a JavaScript expression, and can access previously stored variables using the storedVars map detailed above.

Note that variable substitution cannot be combined with JavaScript evaluation.

Echo	javascript{storedVars['dateTomorrow']}
Type	textField	javascript{‘Tomorrow=’ + storedVars['dateTomorrow']}
Echo	javascript{‘Tomorrow=’ + storedVars['dateTomorrow']}
Type	fullName	javascript{storedVars['fullName'].toUpperCase()}

Simple variable substitution – ${…}

Variable substitution provides a simple way to use a previously stored variable in a command parameter. The variable to substitute is indicated by ${variableName}. Multiple variables can be substituted, and intermixed with static text.

Echo	${dateTomorrow}
Type	textField	Today: ${dateToday} Tomorrow: ${dateTomorrow}
Echo	${variableName}
Type	fullName	$(title} ${firstName} ${lastName}

Example in Cloud Testing

The following example from Cloud Testing shows what can be done.

The example script is available to view in the ‘Live Demo’ account is available via the Online demo page.

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

Phil Smith - Cloud Testing — Fri, 17 Jul 2009 14:11:18 +0000

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.



Cloud Testing Pop-up example



Cloud Testing Pop-up example

Example Code 1

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

Alert

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

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:

Two 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:

getAlert()
assertAlert()
assertAlertNotPresent()
assertAlertPresent()
storeAlert()
storeAlertPresent()
verifyAlert()
verifyAlertNotPresent()
verifyAlertPresent()
waitForAlert()
waitForAlertNotPresent()
waitForAlertPresent()

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



Cloud Testing Alert example



Displayed before the alert.




Displayed after someone clicks OK on the alert.

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.

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

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:

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: