How-To Tutorials - Programming

  Open Text Metastorm ProVision® 6.2 Strategy Implementation Create and implement a successful business strategy for improved performance throughout the whole enterprise         Read more about this book       (For more resources on this subject, see here.) Recently, I had a meeting with the directors of a major household brand. They had just finished completing a strategic review of the business, which had been signed off by the board. They had numerous stakeholders to satisfy, and naturally the final result was a compromise, which was reached after months of meetings. I was with an experienced business coach who asked the CEO, "So, how will you know if you have succeeded?". The CEO had difficulty in answering the question. One of his senior managers in the room jumped to his rescue: "Oh, we are working out what we want to measure. We have agreed on some of the measures, but haven't yet put any numbers against them." The coach asked: "How do people in the organization feel about the new strategy?" The manager replied saying, "It's a good question. There are a lot of people who feel that it was a waste of time and they just want to get back to the real work. We have a team of very passionate and committed people, but they see strategy as navel gazing." We realized that the strategy was doomed. It seems logical to define the goals and then identify the measures. In practice, it is often easier to do it the other way round, even though that is counter-intuitive. First, define the measures of success and then articulate these measures as goals. The employees were right to be dubious. There are various ways to create, read, update, and delete information. These solutions fall into two major approaches—drawing and modeling. Drawing is still the approach adopted by many organizations because it is cheaper. Most companies that have considered using ProVision® have Microsoft Visio installed on every user desktop. As far as a project manager is concerned, Visio is a free resource. The project manager doesn't need to ask for funds, and if they do, then the manager will ask why they aren't using Visio. This article explains the limitations of drawing and why modeling is best practice and essential to support a sustainable strategy. The reader can use this information to make their business case compelling and get the funds that they need to do the job properly. Areas covered also include: The benefits of moving to a central repository. (What needs to be stored and how users can access it.) Are we building architecture or doing design? (The importance of language in getting your message across.) Better decisions now. (The purpose and notion of good enough architecture.) ProVision® and Metastorm BPM. (Is this Metastorm's unique selling point?) The benefits of moving to a central repository It is important to understand the difference between a drawing tool and a visual relational database such as ProVision®. The outputs can look identical. Because drawing tools are so much cheaper, why would you invest in ProVision®? There are a number of drawing packages available, Microsoft Visio is the key player in this market. It is a drawing package that is optimized for business diagrams. Modelers can select pre-built stencils to create models rapidly. As Visio is often installed already, it is the tool of choice of many business analysts. Designed to scale If all you need to do is visually represent an aspect of a business, then there is nothing wrong with Visio. However, its limitations soon become apparent. To understand the key differences, I need to explain some basic concepts about ProVision®. These concepts are the reason why you can manage hundreds of models in ProVision®. It has been designed to scale. The core concepts are: Object Link Model Notebook/File Repository Object ProVision® uses objects to represent business concepts. Everything you see—a role, system, process, or a goal is an object. Every object has a name and an icon. After that, it is up to you how much more detail you want to add. All objects can have associations with other objects. These associations will vary, according to the type of object. Link A link is a special type of object. It is displayed as a line that connects two objects. You can modify the way the line displays, that is, change its color, thickness, or arrow shape. Links appear in their own area in the object inventory. Some types of link can have a payload (a deliverable) and events associated with them. For example, the link between two activities is called a workflow link. This link can display the deliverable that is passed as an output from one activity to the other. It can also display the event that triggers the deliverable. Both deliverables and events are optional. In many cases, it is obvious what the deliverable or event would be. To distinguish between an event and a deliverable, ProVision® places the name of the event inside double quotation marks. In the example shown in the following figure, once the event named "Model ready to review" is triggered, the deliverable called Draft Model becomes the input for the Review Model activity: Model A model is a special kind of object that contains other objects. Every model must have an object that is designated as the subject of the model. ProVision® provides three types of model—hierarchical, non-hierarchical, and navigator. Hierarchical models typically allow only one object type to appear. For example, a Systems model can be used to create only the hierarchical relationships of systems. No other object type can be added. Even if you create a custom object, you will not be permitted to add it to a hierarchical model. Non-hierarchical models permit more than one object type to appear, so that you can show predefined relationships other than parent-child relationships between these objects. For example, a Systems Interaction model will allow you to demonstrate relationships between systems and hardware. The Navigator model is a special model that you can use when you are unable to express the relationships that you want using one of the other model types. You can use virtually any object type on a Navigator model. This is both its strength and weakness. As any object can be used, you can become overwhelmed by the choices. The Navigator model is the only model type that allows you to display models as well as objects. By default, these display as thumbnails of the full model. In the following example, a Navigator model shows a thumbnail of the Approval Process workflow model. The subject of the workflow model is the activity called Approval Process. It has been placed to the right to demonstrate the difference. The Navigator model has one more purpose. You can use it to visually express indirect relationships. For example, a goal may be realized by delivering a product or service to a customer group. The product requires processes. Each process decomposes down into a series of activities, some of which might require certain computer systems to be in a running state. There is no direct relationship between the goal and the computer system. There is an indirect relationship, which you can visualize using a Navigator model. Notebook and file Objects, links, and models are stored in Notebooks. If you think of a Notebook as a physical book, then the models are equivalent to chapters. Each model tells a story. Inside each story, there are words. Objects are equivalent to words. Links create phrases. Several Notebooks can be stored together. They share a common modeling language that changes the look and feel of objects, links, and models. Other than that, each Notebook is independent. So, it is possible to have two objects in different notebooks that have the same name and type but are completely different. Objects and models can be dragged from one Notebook to another. You can save a Notebook under a different name and thus use the first Notebook as a template for the second. A File is the logical equivalent of a Notebook. The main difference is that a File can be saved anywhere on a computer and then e-mailed or copied onto a memory stick for transfer. So, Files are used to share and exchange Notebooks with other users. Only one Repository can be open at any one time. Only one Notebook can be open within the Repository. In the example shown in the next diagram, the Sample Repository appears in bold writing to highlight that it is open. Also, the PackT Notebook has a different icon to distinguish that it is the Notebook being viewed. Repository All Notebooks are stored in Repositories. A Repository can contain many Notebooks (in practice most users would be unlikely to have more than 50, and typically around 10). The modeling language is associated with a Repository, and once it is made the default language, it changes the names, look and feel of all objects, links, and models, irrespective of which Notebook they are in. In the following example, the Sample Repository is bold to indicate that it is open. The POC Repository has a world icon to represent that it is stored on a remote server and accessed via Knowledge Exchange®. By contrast, local Repositories have a pyramid icon. Now that you have understood these basic concepts, let's see how ProVision® varies from a drawing package such as Visio.

(For more resources related to this topic, see here.) Sketching, scanning, and prototyping Most folks start the design process by developing quick sketches of the concepts. These sketches can be elaborate or rudimentary. Oftentimes, these sketches evolve into paper prototypes that illustrate the flow or steps a user would take to complete a task. By scanning your drawings, making adjustments with your favorite image editing software (Gimp, Adobe Photoshop, and so on), and Axure, you can quickly create a clickable prototype. Getting ready To go through this recipe, you will need to have digital scans of your sketches and access to the image editing software of your choice. How to do it... You will now create a carousel including thumbnails from digital scans of simple, freehanddrawn sketches. Using your image-editing tool, first organize your images and crop them appropriately. You will have to organize the images and visualize the user flow just as you would do for paper prototypes. Start Axure and under Create New select RP File. If you already have Axure open, select File in the main menu, and then click on New, in the drop-down menu to create a new RP document. In the Sitemap, add additional child or sibling pages as necessary to complete your flow by clicking on the Add Page button icon or by right-clicking on any page in the sitemap. In the menu that appears, mouse over Add, and then click on the Child or the Sibling page. Double-click on any page title in Sitemap to select that page. You will see the wireframe for the associated page shown. While holding down the mouse button, drag the Image widget, and place it on the wireframe. Double-click on the Image widget on the wireframe, and select the appropriate scanned sketch. While holding down the mouse button, drag the Hot Spot widget, and place it over the item you would like to make clickable. While holding down the mouse button, drag the corners of the Hot Spot widget on the wireframe to the desired size. With Hot Spot selected, in the Widget Interactions and Note spane, click on Create Link…. In the Sitemap pop up, click on the associated page in the user flow. Repeat steps 7 through 10 for each region on your wireframe that you would like to make clickable. Repeat steps 4 through 11 for each page in Sitemap that you would like to make a part of the prototype. You can now choose to preview or save a copy of the prototype. To preview the prototype, click on the Preview button in the toolbar. To save a copy of the prototype, click on the Publish button in the toolbar, and select Generate HTML Files…. You can also generate the prototype by going to the main menu, selecting Publish, and clicking on Generate HTML Files…. How it works... Using this recipe, you are able to convert your paper sketches into clickable digital prototypes. Each paper sketch becomes a page in the Sitemap through the use of the Image widget. To accomplish this, you opened the scanned image with the Image widget to display your paper sketch on the page. To create clickable regions, you used Hot Spot and associated the next page in the flow using Create Link…. You used as many image map regions as clickable elements needed for the interactions on a page. Creating a dynamic Breadcrumb Master Using Masters in Axure allows you to create reusable components. When you make a change to a Master, the change is applied to all wireframes that contain that Master. Leveraging Masters can ensure the consistency of elements across your prototypes. Getting ready In this recipe you will create a dynamic Breadcrumb Master. In Axure, verify that the Widget Manager and Page Properties panes are shown. To verify, click on View in the main menu and mouse over Panes. In the pop-up menu, make sure that a check mark is next to all items, including the Widget Manager and Page Properties panes. How to do it... To create a dynamic Breadcrumb Master, first you will create new pages in your sitemap and three empty Masters (for example, Template, Header, Menu, and BreadCrumb). Next, you will place widgets on the Header, Menu, and BreadCrumb Masters. You will then place the Header, Menu, and BreadCrumb Masters onto the Template Master. Finally, you will drag the Template Master to all of the pages in Sitemap. Start Axure and under Create New select RP File. In the Sitemap create pages as follows: In the Masters pane, create four individual Masters, titled: Template, Header, Menu, and BreadCrumb, respectively, as shown in the following screenshot: Right-click on each Master you created in step 3, mouse over Drop Behaviour, and click on Lock to Master Location. This will cause the widgets in each Master to maintain the xand ycoordinates no matter where the Master is placed in a wireframe. In the Masters pane, double-click on the Header Master to select it. While holding down the mouse button, drag the Placeholder widget, and place it on the wireframe. With the Placeholder widget selected, type Home, and change the x: 10, y: 12, w: 96, and h: 30(present at the top-left of the window). In the Widget Interactions and Notes pane, click on the Shape Name text field, and type HomeLink. While holding down the mouse button, drag the Label widget, and place it at the coordinates (130,18) on the wireframe. With the Label widget selected, perform the following steps: Type BreadCrumb Prototype. In the Widget Interactions and Notes pane, click on the Shape Name text field, and type HeaderLabel. In the Widget Properties and Style pane, click on the Style tab, and then scroll to the Font section. Increase the font size to 18 by clicking on the font size dropdown, mouse over 18, and click to select: In the Masters pane, double-click on the Menu Master to select it. While holding down the mouse button, drag the Classic Menu - Horizontal widget, and place it at the coordinates (10,52) on the wireframe. In the Widget Interactions and Notes pane, click on the Menu Name text field, and type MainMenu. To name and link the primary menu item, perform the following steps: Click on the first menu item labeled File to select it, and type Primary. In the Widget Interactions and Notes pane, click on the Menu Item Name text field, and type MenuPrimary. In the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Add Case…. In the Case Editor (OnClick) pop up, in Case description, rename the case description OpenPrimaryPage. In Click to add actions, click on Open Link. In Organize actions, you will see the interaction description update to Open Link in Current Window. In Configure actions, click on the radio button next to Link to a page in this design, and then click on Primary Page. Click on OK. In the Widget Properties and Style pane, click on the Style tab, and then scroll to the Font section. Increase the font size to 16 by clicking the font size dropdown, mouse over 16, and then click on it to select. To name and link the category menu item, perform the following steps: Click on the second menu item, labeled Edit, to select it, and type Category. In the Widget Interactions and Notes pane, click on the Menu Item Name text field, and type MenuCategory. In the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Add Case…. In the Case Editor (OnClick) pop up, in Case description, rename the case description OpenCategoryPage. In Click to add actions, click on Open Link. In Organize actions, you will see the interaction description update to Open Link in Current Window. In Configure actions, click on the radio button next to Link to a page in this design, and then click on Category page. Click on OK. In the Widget Properties and Style pane, click on the Style tab, and then scroll to the Font section. Increase the font size to 16 by clicking the font size dropdown, mouse over 16, and then click on it to select. To name and link the content menu item, perform the following steps: Click on the third menu item labelled View to select it, and type Content. In the Widget Interactions and Notes pane, click on the Menu Item Name text field, and type MenuContent. In the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Add Case…. In the Case Editor (OnClick) pop up, in Case description, rename the case description OpenContentPage. In Click to add actions, click on Open Link. In Organize actions, you will see the interaction description update to Open Link in Current Window. In Configure actions, click on the radio button next to Link to a page in this design, and then click on Content Page. Click on OK. In the Widget Properties and Style pane, click on the Style tab, and then scroll to the Font section. Increase the font size to 16 by clicking the font size dropdown, mouse over 16, and click on it to select it. To add a submenu item, right-click on the Primary menu item, and click on Add Submenu: Click on the first submenu item, and enter Secondary, and then perform the following steps: In the Widget Interactions and Notes pane, click on the Menu Item Name text field, and type MenuSecondary. In the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Add Case…. In the Case Editor (OnClick) pop up, in Case description, rename the case description OpenSecondaryPage. In Click to add actions, click on Open Link. In Organize actions, you will see the interaction description update to Open Link in Current Window. In Configure actions, click on the radio button next to Link to a page in this design, and then click on Secondary Page. Click on OK. Right-click on the second and third submenu items, and click on Delete Menu Item. In the Masters pane, double-click on the BreadCrumb Master to select it. While holding down the mouse button, drag the Dynamic Panel widget, and place it on the wireframe. Change the x: and y: coordinates and w: and h: to be: With the Dynamic Panel selected, perform the following steps: In the Widget Interactions and Notes pane, click on the Dynamic Panel Name text field, and then type BreadCrumb. In the Widget Manager, rename State1 Home. Add states to Dynamic Panel as follows: Primary, Secondary, Tertiary,Category, Product, and Content. With Dynamic Panel selected, perform the following steps: Double-click on the state labeled Primary in the Dynamic Panel Manager. While holding down the mouse button, drag a Label widget and place it on the wireframe at coordinates (0,6). Enter Homeas the text on the Label widget. In the Widget Interactions and Notes pane, click on the Shape Name text field, and then type HomeBreadCrumbLink. In the Widget Interactions and Notes, pane click on the Interactions tab, and then click on Add Case…. In the Case Editor (OnClick) pop up, in Case description, rename the case description OpenHomePage. In Click to add actions, click on Open Link. In Organize actions, you will see the interaction description update to Open Link in Current Window. In Configure actions, click on the radio button next to Link to a page in this design, and click on Home page. Click on OK. You will now focus on building the Dynamic Panel states Primary, Secondary, Tertiary, Category, Product, and Content. The following screenshot shows what the Primary state will look like: To build the Dynamic Panel states Primary, Secondary, Tertiary, Category, Product, and Content, with the Dynamic Panel selected perform the following step: Repeat step 27, changing the step each time with the following information: Panel State Coordinates for Label Widget Label Text Shape Name Case description Configure Actions Link to Primary (0,6) Home HomeBreadCrumbLink OpenHomePage Home Primary (55,6) Primary PrimaryBreadCrumbLink OpenPrimaryPage Primary Page Secondary (0,6) Home HomeBreadCrumbLink OpenHomePage Home Secondary (55,6) Primary PrimaryBreadCrumbLink OpenPrimaryPage Primary Page Secondary (115,6) Secondary SecondaryBreadCrumbLink OpenSecondaryPage Secondary Page Tertiary (0,6) Home HomeBreadCrumbLink OpenHomePage Home Tertiary (55,6) Primary PrimaryBreadCrumbLink OpenPrimaryPage Primary Page Tertiary (115,6) Secondary SecondaryBreadCrumbLink OpenSecondaryPage Secondary Page Tertiary (200,6) Tertiary TertiaryBreadCrumbLink OpenTertiaryPage Tertiary Page Category (0,6) Home HomeBreadCrumbLink OpenHomePage Home Category (55,6) Category CategoryBreadCrumbLink OpenCategoryPage Category Page Product (0,6) Home HomeBreadCrumbLink OpenHomePage Home Product (55,6) Category CategoryBreadCrumbLink OpenCategoryPage Category Page Product (125,6) Product Detail DetailBreadCrumbLink OpenDetailPage Product Detail Page Content (0,6) Home HomeBreadCrumbLink OpenHomePage Home Content (55,6) Content ContnetBreadCrumbLink OpenContentPage Content Page To populate the Template Master with the component masters (for example, Header, Menu, and BreadCrumb Masters), perform the following steps: In the Masters pane, double-click on the Template Master to select it. While holding down the mouse button, drag the Header Master, and place it anywhere on the wireframe. In step 4, you specified Lock to Master Location for the Drop Behaviour of each Master. This causes the widgets in each Master to maintain their x and y coordinates no matter where the Master is placed in a wireframe. While holding down the mouse button, drag the Menu Master, and place on the wireframe. While holding down the mouse button, drag the BreadCrumb Master, and place it on the wireframe. While holding down the mouse button, drag the Template Master, and place it anywhere on the wireframe. The Template Master will align to the fixed X and Y coordinates. Below the wireframe, click on the Page Interactions tab, and double-click on the OnPageLoad interaction. In the Case Editor (OnPageLoad) pop up, perform the following steps: In Case description, rename the case description SetBreadCrumbState. In Click to add actions, click on Dynamic Panels to expand, and then click on Set Panel State. In Organize actions, you will see the interaction description update to Set Panel to State. In Configure actions under Select the panels to set the state, click on the checkbox next to the Label for the Breadcrumb (Dynamic Panel). Click on the Select the state dropdown, and mouse over Home. Click on Home to select it. You will see the interaction description under Organize actions update to read. Set Template/BreadCrumb/BreadCrumb Home. Click on OK. Repeat steps 30 to 32 for the remaining pages in Sitemap, modifying each OnPageLoad case to set the BreadCrumb state to the appropriate panel state corresponding to the selected page in Sitemap(for example, for the Primary page, the corresponding state would be Primary, and so on). You can now choose to preview or save a copy of the prototype. To preview the prototype, click on the preview button in the toolbar. To save a copy of the prototype, click on the Publish button in the toolbar, and select Generate HTML Files…. You can also generate the prototype by going to the main menu, selecting Publish, and clicking on Generate HTML Files…. How it works... For this recipe, you used Masters, a dynamic panel, a menu widget, and text widgets to create a dynamic BreadCrumb Master. You created four Masters: Template, Header, Menu, and BreadCrumb and set the behavior of each to Lock to Master Location. This retained the coordinates of the widgets placed on each Master when used on a page. The Template Master contained the Header, Menu, and BreadCrumb Masters. The Menu was labeled and linked to the corresponding pages in Sitemap. The BreadCrumb Master contained a dynamic panel that had a corresponding panel state for each of the pages in Sitemap. For each individual panel state, label widgets were used and linked to the corresponding page in the sitemap. When a page is loaded, the Page Interaction OnPageLoad event sets the state of the BreadCrumb dynamic panel to show the correct BreadCrumb state. Generating a dynamic welcome message Using variables, you can set widget values and text dynamically. For example, when a page loads, you could show the user a welcome message based on the day of the week. Getting ready In this recipe, you are going to explore using built-in variables in expressions. You will show the user a welcome message using the DayOfWeek variable. How to do it... Perform the following steps: Start Axure and under Create New select RP File. If you already have Axure open, select File in the main menu, and then click on New in the drop-down menu to create a new RP document. While holding down the mouse button, drag the Label widget, and place it on the wireframe at (53,13). With the Label widget selected, in the Widget Interactions and Notes pane, click on the field below Shape Name, and then type WelcomeText. In the Page Properties pane, click on the Page Interactions tab and double-click on the OnPageLoad interaction. The page will appear as shown in the following screenshot: In the Case Editor (OnPageLoad) pop up, in Case description, type DisplayMessage. In Click to add actions, click on Set Text. In Organize actions, you will see the interaction description update to Set Text In Configure actions, under Select the widgets to set text, click in the checkbox next to Label for the Welcome Text (Shape). In Configure actions under Set text to, set the dropdown to value, and click on the fx button to bring up the Edit Text pop up. In the Edit Text popup, enter in the text field Welcome. Today is. Click on the Insert Variable or Function... link to open the drop-down menu; scroll to Date; click on Date to expand the selection; and click on getDayOfWeek(), as shown in the following screenshot: Click on OK. You can now choose to preview or save a copy of the prototype. To preview the prototype, click on the preview button in the toolbar. To save a copy of the prototype, click on the Publish button in the toolbar, and select Generate HTML Files…. You can also generate the prototype by going to the main menu, selecting Publish, and then clicking on Generate HTML Files…. How it works... For this recipe, you used the Label widget, and using the Widget Interactions and Notes pane, you applied a label to the widget. Next in the Page Properties pane, you set a case on the OnPageLoad interaction to Set Variable/Widget value(s). Finally, in the Edit Text popup, you used a built-in variable. There's more... At times you may find that your Label widget is not displaying the built-in variable. One possible cause is that the length of the Label widget is not long enough to display all of the characters. For a list of variables available in Axure 7, visit http://www.axure.com/forum/tips-tricks-examples/8030-v7-variables-list.html

In this article, by Dima Kovalenko, author of the book, Selenium Design Patterns and Best Practices, we will learn how test automation have progressed over the period of time. Test automation was simpler in the good old days, before asynchronous page loading became mainstream. Previously the test would click on a button causing the whole page to reload; after the new page load we could check if any errors were displayed. The act of waiting for the page to load guaranteed that all of the items on the page are already there, and if expected element was missing our test could fail with confidence. Now, an element might be missing for several seconds, and magically show up after an unspecified delay. The only thing for a test to do is become smarter! (For more resources related to this topic, see here.) Filling out credit card information is a common test for any online store. Let’s take a look at a typical credit card form: Our form has some default values for user to fill out, and a quick JavaScript check that the required information was entered into the field, by adding Done next to a filled out input field, like this: Once all of the fields have been filled out and seem correct, JavaScript makes the Purchase button clickable. Clicking on the button will trigger an AJAX request for the purchase, followed by successful purchase message, like this: Very simple and straight forward, anyone who has made an online purchase has seen some variation of this form. Writing a quick test to fill out the form and make sure the purchase is complete should be a breeze! Testing AJAX with sleep method Let’s take a look at a simple test, written to test this form. Our tests are written in Ruby for this demonstration for easy of readability. However, this technique will work in Java or any other programming language you may choose to use. To follow along with this article, please make sure you have Ruby and selenium-webdriver gem installed. Installers for both can be found here https://www.ruby-lang.org/en/installation/ and http://rubygems.org/gems/selenium-webdriver. Our test file starts like this: If this code looks like a foreign language to you, don’t worry we will walk through it until it all makes sense. First three lines of the test file specify all of the dependencies such as selenium-webdriver gem. On line five, we declare our test class as TestAjax which inherits its behavior from the Test::Unit framework we required on line two. The setup and teardown methods will take care of the Selenium instance for us. In the setup we create a new instance of Firefox browser and navigate to a page, which contains the mentioned form; the teardown method closes the browser after the test is complete. Now let’s look at the test itself: Lines 17 to 21 fill out the purchase form with some test data, followed by an assertion that Purchase complete! text appears in the DIV with ID of success. Let’s run this test to see if it passes. The following is the output result of our test run; as you can see it’s a failure: Our test fails because it was expecting to see Purchase complete! right here: But no text was found, because the AJAX request took a much longer time than expected. The AJAX request in progress indicator is seen here: Since this AJAX request can take anywhere from 15 to 30 seconds to complete, the most logical next step is to add a pause in between the click on the Purchase button and the test assertion; shown as follows: However, this obvious solution is really bad for two reasons: If majority of AJAX requests take 15 seconds to run, than our test is wasting another 15 seconds waiting for things instead continuing. If our test environment is under heavy load, the AJAX request can take as long as 45 seconds to complete, so our test will fail. The better choice is to make our tests smart enough to wait for AJAX request to complete, instead of using a sleep method. using smart AJAX waits To solve the shortcomings of the sleep methods we will create a new method called wait_for_ajax, seen here: In this method, we use the Wait class built into the WebDriver. The until method in the Wait class allows us to pause the test execution for an arbitrary reason. In this case to sleep for 1 second, on line 29, and to execute a JavaScript command in the browser with the help of the execute_script method. This method allows us to run a JavaScript snippet in the current browser window on the current page, which gives us access to all of the variables and methods that JavaScript has. The snippet of JavaScript that we are sending to the browser is a query against jQuery framework. The active method in jQuery returns an integer of currently active AJAX requests. Zero means that the page is fully loaded, and there are no background HTTP requests happening. On line 30, we ask the execute_script to return the current active count of AJAX requests happening on the page, and if the returned value equals 0 we break out of the Wait loop. Once the loop is broken, our tests can continue on their way. Note that the upper limit of the wait_for_ajax method is set to 60 seconds on line 28. This value can be increased or decreased, depending on how slow the test environment is. Let’s replace the sleep method call with our newly created method, shown here: And run our tests one more time, to see this passing result: Now that we stabilized our test against slow and unpredictable AJAX requests, we need to add a method that will wait for JavaScript animations to finish. These animations can break our tests just as much as the AJAX requests. Also, are tests are incredibly vulnerable due third party slowness; such as when the Facebook Like button takes long time to load. Summary This article introduced you to using a simple method that intelligently waits for all of the AJAX requests to complete, we have increased the overall stability of our test and test suite. Furthermore, we have removed a wasteful delay, which adds unnecessary delay in our test execution. In conclusion, we have improved the test stability while at the same time making our test run faster! Resources for Article: Further resources on this subject: Quick Start into Selenium Tests [article] Behavior-driven Development with Selenium WebDriver [article] Exploring Advanced Interactions of WebDriver [article]