User case 

Suppose that you need to test on different web browsers: Internet Explorer, Mozilla Firefox , Google Chrome , Edge and Safari. You may find yourself asking two questions:   

• Do I need different interface definitions for each of Internet Explorer, Firefox , Chrome , Edge and Safari ?

• Do I need to write different tests for each browser?

Solutions

1. If the web pages have similar titles, and controls inside the web pages have property values that are the same or similar in different browsers, you can avoid the need to create a different interface definition for each browser:

a. For windows (web pages),  capture the property doc title, because its value generally remains constant across browsers. 

b. For controls, capture properties that have the same or similar values across browsers, and which can uniquely identify the controls.

2. Controls inside a given web page may have property values that vary from one browser to the next. In some cases, Xpath locator to identify these web elements accurately and precisely may solve the problem. In others, you may find it too difficult to use a single interface to map all the controls you need in a way that will apply to all possible browsers. For these situations, TestArchitect supports Keyword variations and Systems& Platforms features to help users automate their tests across browsers.

1. Capturing one interface definition for all browsers 

1.1. Capture a window (web page)

 

Ø Open a web page that you want to capture the interface of, so that it may be tested on browsers (e.g https://www.logigear.com/company/company-overview/careers)

 

Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4080690768/original/E-DUBVPwLqWQtOcW6yTfIT-gdDQFuXDnhA.PNG?1582513429

 

 

Ø Create a new interface entity in TestArchitect:

 · Under the Interfaces subtree, right-click an interface node and then click New Interface Entity.

        Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4003999814/original/2.jpg?1404205720

· Enter information for the interface: 

+ Name: the interface name 
+ Description: (Optional) short description for the interface 

       Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4003999839/original/3.jpg?1404205803

· Click Create. The new interface is added to the project under the selected interface node.  

Ø Open the Interface Viewer (Press F7 or select Tools > Interface Viewer from the main menu; or click the Interface Viewer icon on the toolbar.) The Interface Viewer is launched. 

Ø Capture the browser window using  TA property doc title.


Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4080690880/original/6dmupjurgtY0m84S1Ak20T44IfwWZeudNQ.PNG?1582513914 

1.2. Capture controls

Ø Identify control: there are 2 options:

   Option 1

  • Expand tree node
  • Select control
  • Select Turn on auto highlight on the toolbar to identify the control in the browser 

   Option 2 

  • Click Identify icon on the toolbar.
  • Move mouse to control that you want to identify on browser, and then click it

    Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4080691002/original/L4f50IKIfUei9VI9pyLsoVq0XI4hlFiEUA.PNG?1582514324

 

 Control will be shown on Interface Viewer’s tree.                    

  Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4080691013/original/qT9G7Jrfc6NaEqnRrniFy1Po5mfJ8_7nRw.PNG?1582514410

 

Ø Choose a property to capture with the control. You should choose a property-value pair that a), uniquely identifies the control, and b), does not vary in value either over time or across browsers. Typically, the properties name, id, or xpath are useful for identification.  

Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4080691158/original/3NNwAREVjbJsK8GzUwH4JdWuucH7PCC0YQ.PNG?1582514908  


Ø Map control 

  •   Right-click the control to be mapped, and then select Rename
  •   Type your choice of TA name for the item, and hit Enter. The control is now mapped.  

    Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4080691293/original/CrqqeOABa3kKjJ22VvtFuPmMce9AMbw7jQ.PNG?1582515405

 

Ø Save your settings to the interface entity by clicking Save on the toolbar.

Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4080691320/original/prgYvUkTw6MIvO0m2J4YEh5OayP_sxvqOw.PNG?1582515547

2. Using keyword variations

Use keyword variations to create high-level actions or interface entities tailored to a given browser. To demonstrate this, we will perform the following steps: 

  • Create a high-level action
  • Create keyword variations for the action
  • Update the keyword variations
  • Execute a test with variation.

2.1. Create the high-level action

Create an action, name it config, and enter a single setting action line as follows:              

Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4003999991/original/11.jpg?1404206132

 

This is your default version of config.

 

2.2. Create a keyword variation of the action

Ø Copy a definition (of an action, or interface entity) of which you wish to create a variation: In the TestArchitect explorer tree.

 1.select the item and press Ctrl+C on your keyboard, or  

 2.right-click the node and click Copy.


Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4004000004/original/12.jpg?1404206163

  

Ø Right-click a folder node where the variation is to reside and select Paste with Variations from the context menu.

Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4004000010/original/13.jpg?1404206180

 

Ø Select the Use keywords check box. In the text field, type the keyword(s) to be used to define this variation.

Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4080691390/original/EQuAQKeyNGQep3g7vIIcfCRW1B9p9pMDmQ.PNG?1582515845

 

Ø The new variation appears as a node in the TestArchitect Explorer tree:

Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4004000031/original/15.jpg?1404206209

 

2.3. Update the action variation

Modify your action to match the requirements of its target browser.

In this case, the target browser is FireFox. To have TestArchitect launch a FireFox browser window, specify it in the setting / use browser action line.

Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4080691634/original/MsDxzjqs-s429LPx49wuM6Kqimd0MJbxZA.png?1582516936

 

2.4. Executing a test with a keyword variation 

Ø Select test modules that you want to execute against the FireFox browser.

Ø Click the Execute button on the toolbar.

Ø In the Execute Test dialog box, type the keyword name (“firefox”) into the Keyword textbox, then  click Execute to start the test.

Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4004000080/original/17.jpg?1404206319

 

3. Using Systems & Platforms

The Systems & Platforms feature makes creating cross-browser tests easier. Supported browsers are Internet Explorer, Mozilla Firefox , Google Chrome and Edge . To do this we follow these steps:

  • Create a platform and version
  • Link each variation to a version
  • Execute a test with variations

3.1. Create a platform 

To execute your tests across multiple browsers types you must create a new platform and name it. For example, we’ll name ours “Browser”. 

Ø Right-click the Systems & Platforms node, and then select New Systems or Platform. The New System dialog box appears

Ø Enter details for the new platform:  

  • Name: The name of the new platform (“Browser”). 
  • Description: (optional) Short description of the platform. 

Ø Click Create. 

Ø The Browser platform is added as a node beneath the Systems & Platforms node.

Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4004000113/original/18.jpg?1404206372

 

3.2. Create a version 

You can now create three version nodes for the Browser system and platform. The three new version nodes you will create are Internet Explorer, Mozilla Firefox , Google Chrome and Edge.

Ø Right-click the Browser node beneath the Systems & Platforms node, and then select Add Version

Ø Enter the details for the new version 

  • Name: the name of the new version, (e.g., “Internet Explorer”). 
  • Description: (optional) short description for the new version. 

Ø Click Create. The new version Internet Explorer is added as a node beneath the Browser system node. 

Ø Repeat the above steps to create the other three versions, Chrome , Firefox and Edge

Ø The four new versions – Internet Explorer, Chrome, Firefox and Edge – are added as nodes beneath the Browser platform node.



3.3. Link each variation to a version

Select the high-level action or interface entity for which you want to create a variation. The set of variations of a given item is used to execute cross-platform automation tests.

Example: You have a high-level action called config that is used to create essential initial configurations for the  browser. It is suggested that you have variations of the config action that set up web automation tests for each of Internet Explorer , Edge , Google Chrome, and Mozilla Firefox:

Ø In the TestArchitect explorer tree, navigate to the node for the config action you created earlier, right-click it, and then select Copy.

Ø Right-click the Actions node in the explorer tree, and select Paste with Variations. You have now created a variation for the config action.

Ø In the Variations dialog box, select the Link to version node check box.

Ø From the Select system drop-down list, select Browser.

Ø In the displayed system subtree under Browser, select Chrome to link this variation to Google Chrome. 

Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4080691772/original/yHDs4tZQTJRqCnNTxACu5tiQ--RFFTPrgg.PNG?1582517634

 

Ø Click OKYour new config variation for Google Chrome appears as a node in the TestArchitect explorer tree.

Ø Repeat the above steps to create another variation linked to Mozilla Firefox and Edge 

Important: You now have three variations of the default config action, but their contents are all identical. Obviously, you must edit them (well, two of them), to get them to have different behaviors – that is, to ensure that each is tailored for its respective target browser.  That editing is fairly simple:

Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4080692063/original/ee9tIhXT_qfco1kN4tBj5cG_KtkJH4Jhzw.png?1582518591

 

3.4. Executing a test with variation

In TestArchitect explorer, select the test modules that you want to execute across multiple browsers. 

Ø Click the Execute button on the toolbar. The Execute Test dialog box appears. 

Ø Execute the test modules.  

  • In the Execute Test dialog box, click the Select Version button in the Variation Specification frame. The Select Version dialog box appears. 
  • Select a browser. 
  • Select the Internet Explorer check box to execute against Internet Explorer.
  • Select the Chrome check box to execute against Google Chrome.
  • Select the Edge check box to execute against Edge.
  • Select the Firefox check box to execute against Mozilla Firefox.
  •  Click OK

Ø On the Execute Test dialog box, click Execute to start the test.

Description: https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/4080693558/original/OJT8ZRU7jzNmQSNNNPdCkqLL7p6BZmw_Gw.PNG?1582522389