Automatic Validation of Web pages With TestComplete 4
Automatic Validation of Web pages With TestComplete 4
Most modern sites are very dynamic. They contain a lot of content, which is constantly updated. Of course, no one is perfect and Web developers may make mistakes while changing web pages. It is a good practice to validate the web pages’ markup and check the pages for broken links before publishing the site.
To perform these tasks, you can use various tools. For instance, you can use the tools mentioned in the “Website Checklist” article:
The W3C Markup Validation Service and WDG HTML Validator are used to validate the HTML code. The W3C CSS Validation Service is used to validate the CSS and Link Valet is used to check for broken links.
All of these tools are similar:
- You open a web page corresponding to the desired tool.
- On the page, specify the web site to be checked and initiate the process.
- After the check is over, you can save the results to a file and explore them to determine whether the check was successful.
You can easily check your web site for errors using the above-mentioned tools once or twice, but if you are going to check your site regularly, it’s better to automate this process. Below, we will create a TestComplete script that will use the above-mentioned tools for checking web pages.
Installing the Web Testing Plug-In
In order to check and validate web pages, we need the Web Testing plug-in to be installed in TestComplete. You can check whether the plug-in is installed in the Extensions dialog (click File | Install Extensions on TestComplete’s main menu). If the plug-in is not listed in this dialog, please run TestComplete’s installation program and install the plug-in.
Validating the HTML Markup
To validate your web page’s markup, you can use the W3C Markup Validation Service. To use this service:
- Open the https://validator.w3.org/ page.
- Specify the web page to be validated.
- Press Check.
The service will analyze the specified page and generate a report. You can save this report to a file and examine it.
Note that you can use the https://validator.w3.org/detailed.html page rather than the https://validator.w3.org page. This page lets you specify extended validation settings such as encoding type and validating standards. In our example we use the https://validator.w3.org page.
To create a validation procedure:
- Launch Internet Explorer and open the following page: https://validator.w3.org/.
- Launch TestComplete.
- Create a new JScript project.
- Start recording in TestComplete.
- Switch to the Internet Explorer window containing the validator.
- Enter the address of the page you are going to test (for example, www.yourwebsite.com) into the Validate by URL | Address edit box that is displayed on the https://validator.w3.org page.
- Click Check.
- Wait until Internet Explorer displays the check results.
- Select File | Save As from Internet Explorer’s menu and save the result page to an .mht file (for instance, HTML_Result.mht).
- Stop recording in TestComplete.
After recording you get the following script:
function Test1() {
var p1;
var w1;
var w2;
var w3;
var w4;
p1 = Sys.Process("IEXPLORE");
w1 = p1.Window("IEFrame", "*");
w2 = w1.Window("Shell DocObject View").Window("Internet Explorer_Server");
w2.ToURL("https://validator.w3.org/");
w3 = w2.Page("https://validator.w3.org/").document.all;
w4 = w3.Item("uri");
w4.Click(10, 10);
w4.Keys("www.microsoft.com");
w3.Item(68).Click(10, 10);
//Please wait until download completes: "https://validator.w3.org/check?uri=www.microsoft.com"
w2.Wait();
w2 = w1.Window("WorkerW", "", 1).Window("ReBarWindow32").Window("ToolbarWindow32", "", 4);
w2.ClickItemXY("&File", 12, 14, false);
w2.PopupMenu.Click("Save As...");
w1 = p1.Window("#32770", "Save Web Page");
w1.Window("ComboBoxEx32").Window("ComboBox").Window("Edit").Keys("C:HTMLResult1");
w1.Window("ComboBox", "", 2).ClickItem("Web Archive, single file (*.mht)");
w1.Window("Button", "&Save").ClickButton();
}The procedure code can be divided into three parts:
- Obtaining Internet Explorer objects (the Internet Explorer process, IEFrame window, Internet Explorer_Server window).
- Performing user actions within the Markup Validation Service Web page.
- Saving results.
In this connection, it’s better to organize the recorded script into three routines that will correspond to these tasks.
One of the procedures will simulate user actions within the validator web page:
function ValidateHTML_W3CMarkUpValidator(IEProcess, IEFrameWindow, IEServerWindow, Address, ResultFile) {
var AllCollection, AddressField;
IEServerWindow.ToURL("https://validator.w3.org/");
AllCollection = IEServerWindow.Page("https://validator.w3.org/").document.all;
AddressField = AllCollection.Item("uri");
AddressField.Click(10, 10);
AddressField.Keys(Address);
AllCollection.Item(68).Click(10, 10);
// Wait until download completes
IEServerWindow.Wait();
SaveResultPage(IEProcess, IEFrameWindow, ResultFile);
Log.Message("HTML results of the W3C Markup Validation Service have been saved to the following file: " + ResultFile);
}Another procedure will save the page displaying checked results to a file:
function SaveResultPage(IEProcess, IEFrameWindow, ResultFile) {
var IEMenu, SaveWebPage, FileNameField;
Utilities.DeleteFile(ResultFile);
IEMenu = IEFrameWindow.Window("WorkerW", "", 1).Window("ReBarWindow32").Window("ToolbarWindow32", "", 4);
IEMenu.ClickItemXY("&File", 2, 9, false);
IEMenu.PopupMenu.Click("Save As...");
SaveWebPage = IEProcess.Window("#32770", "Save Web Page");
FileNameField = SaveWebPage.Window("ComboBoxEx32").Window("ComboBox").Window("Edit");
FileNameField.Click(14, 7);
FileNameField.Keys("[Home]![End][Del]" + ResultFile);
if (SameText(ExtractFileExt(ResultFile), ".mht")) {
SaveWebPage.Window("ComboBox", "", 2).ClickItem("Web Archive, single file (*.mht)")
} else {
SaveWebPage.Window("ComboBox", "", 2).ClickItem("Web Page, HTML only (*.htm;*.html)");
SaveWebPage.Window("Button", "&Save").ClickButton();
Delay(100);
// Wait until the "Save Web Page" window closes
SaveWebPage = IEProcess.WaitWindow("#32770", "Save Web Page", -1, 1000);
}
while (SaveWebPage.exists) Sleep(500);
}The third procedure is the main procedure. It will perform initialization actions and call two other routines:
function Main() {
var IEProcess, IEFrameWindow, IEServerWindow;
if (!BuiltIn.IsPluginInstalled("Web Testing Plug-In")) {
Log.Error("The example will not work if the Web Testing Plug-In is disabled. Please enable the plug-in.");
return;
}
WinExec(BuiltIn.GetCOMServerPath("InternetExplorer.Application"), SW_MAXIMIZE);
IEProcess = Sys.WaitProcess("iexplore");
if (IEProcess.Exists) {
IEFrameWindow = IEProcess.Window("IEFrame", "*");
if (IEFrameWindow.WaitWindow("TabWindowClass", "*", 1, 3000).Exists) {
IEServerWindow = IEFrameWindow.Window("TabWindowClass", "*").Window("Shell DocObject View").Window("Internet Explorer_Server", "", 1);
} else {
IEServerWindow = IEFrameWindow.Window("Shell DocObject View").Window("Internet Explorer_Server", "", 1);
// Call validation procedures
ValidateHTML_W3CMarkUpValidator(IEProcess, IEFrameWindow, IEServerWindow,
"www.microsoft.com", "C:Validate_Microsoft_W3CMarkUp.mht");
IEFrameWindow.Close();
}
while (IEProcess.exists) Sleep(500);
} else {
Log.Error("Could not start Internet Explorer");
}
}You can download the sample TestComplete project containing this code from here.
Validating CSS and Checking for Broken Links
Validating CSS and checking for broken links is similar to validating web page markup. The main difference is that you should open another web page (the web page of the desired validator). Also, you have to use specific methods and properties for simulating user actions over the validator page, since different validators have different settings.
You can download the TestComplete project that contains routines for validating CSS and checking for broken links from here.