Switching between (inline) frames and browser tabs

When your user scenario needs to switch focus to a newly opened tab or an (inline) frame, all subsequent actions after the switch take place on the (inline) frame or new tab until you make a switch back. The switch between tabs and (inline) frames is similar, but they have differences you need to know about when you script your transactions.

Switching (inline) frames

When your user path includes interactions with an (inline) frame on the page, the Transaction Recorder captures the switch actions between the root and the embedded document, but you may need to make some adjustments to the selectors the conversion process chose when converting your recording into a script.

When you upload the recording to your Uptrends account, the recording is converted to a script. During the conversion process, Uptrends does its best to choose the correct selector for the (inline) frame. However, Uptrends’ algorithm doesn’t always make the best choice, and sometimes it may not know which attribute to use. Is it a name or ID? URLs are recognized with no problem, but for IDs and name attributes, Uptrends makes its best guess. If the wrong attribute type was chosen, you’ll need to fix the selector.

Follow these instructions to add a switch manually between the root and (inline) frame documents.

1. Click Add action to open the action selection dialog.

2. Click Control: Switch frame to highlight your choice.

3. Click Select.

4. Choose either
   Subsequent actions will target the HTML root document - no other information is needed.

   Subsequent actions will target the following frame/Iframe - choose the identifier type and identifying value.

5. Continue adding frames switches if you need to access frames embedded in the (inline) frame.

Inline frame switch example

In the inline frame switch example, we navigate through Uptrends’ demo scheduler. The script carries out the following steps:

1. Open the demo page
2. Do a content check
3. Click to choose a consultant for the demo
4. Take a brief pause to make sure the inline frame on the new page has loaded completely
5. Do another content check
6. Click a link to navigate to the calendar
7. Check for content
8. Close the inline frame to go back to the root document

{ 
"steps": [ 
  { 
    "name": "Navigate to 'https://www.uptrends.com/demos'",
    "ignoreErrors": false, 
    "recordWaterfall": false, 
    "actions": [ 
    { 
    "navigate": { 
    "url": "https://www.uptrends.com/demos" 
    } 
  }, 
  { 
    "testDocumentContent": { 
      "value": "Attend a webinar", 
      "testType": "Contains" 
      } 
     } 
    ] 
   }, 
   { 
     "name": "Live Demos | Uptrends", 
     "ignoreErrors": false, 
     "recordWaterfall": false, 
     "actions": [ 
       { 
         "click": { 
           "element": { 
             "xpath": "//a[contains(.,'Plan free demo with Mark')]" 
             }, 
           "description": "Click on a hyperlink (Plan free demo with Mark)" 
         } 
       }, 
       { 
         "wait": { 
           "waitTimeMs": 4000 
           } 
         }, 
         { 
           "switchIframe": { 
           "framePath": [ 
             { 
               "iframeUrl": "https://calendly.com/mark-ridderhof/demo?embed_domain=www.uptrends.com&embed_type=PopupText" 
             } 
           ] 
         } 
       }, 
       { 
         "testElementContent": { 
           "value": "Welcome to my scheduling page", 
           "testType": "Contains", 
           "element": { 
             "xpath": "//div[contains(.,'Welcome to my scheduling page')]", 
             "alternatives": [] 
           } 
         }
       } 
     ] 
    }, 
    { 
      "name": "Calendly - Mark Ridderhof", 
      "ignoreErrors": false, 
      "recordWaterfall": false, 
      "actions": [ 
        { 
          "click": { 
            "element": { 
               "xpath": "//a[@data-id='event-type']", 
            } 
          } 
        }, 
        { 
          "testElementContent": { 
            "value": "Select a Date & Time", 
            "testType": "Contains", 
            "element": { 
              "xpath": "//h2[@class='spotpicker-title']", 
              "alternatives": [] 
            } 
          } 
        } 
      ] 
    }, 
    { 
      "name": "Calendly - Mark Ridderhof", 
      "ignoreErrors": false, 
      "recordWaterfall": false, 
      "actions": [ 
         { 
           "switchIframe": { 
             "framePath": [] 
           } 
         }, 
         { 
           "click": { 
             "element": { 
               "xpath": "//div[@class='calendly-popup-close']" 
             } 
           } 
         }, 
         { 
           "testDocumentContent": { 
             "value": "Attend a webinar", 
             "testType": "Contains" 
           } 
         } 
      ] 
    } 
  ] 
}

Switching browser tabs

When a user action opens a new tab, the recorder automatically follows your transaction to the new tab and continues the recording. However, the recorder will not capture a switch back to a previous tab. To switch to the originating tab or any other previously opened tabs, you need to add the switch action yourself using the step editor.

To switch tabs:

1. Click Add action to open the action selection dialog.
2. Click Control: Switch browser tab to highlight your choice.
3. Click Select.
4. Choose either the unique Page title (the title displayed on the tab) or unique URL. You can use a partial page title or URL. For example, instead of https://www.yoursite.com/yourpage you could simply use /yourpage.

If neither identifier works for your scenario, contact support for help.

Example tab switch script

The following example script opens a new browser tab and switches back to the first tab. The script performs this series of actions:

1. Open an Uptrends Blog page
2. Confirm the correct page with a content check
3. Click an element that opens a new tab
4. Confirm the successful tab switch with a content check
5. Change back to the previous tab
6. Confirm the tab switch with a content check

Try it. Copy the code and paste it into a new transaction monitor.

{  
"steps": [ 
  {
    "name": "Navigate to 'https://blog.uptrends.com/web-performance/6-ways-to-reduce-time-to-first-byte-ttfb/'",
    "ignoreErrors": false,
    "recordWaterfall": false,
    "actions": [
      {
        "navigate":  
          {
            "url": "https://blog.uptrends.com/web-performance/6-ways-to-reduce-time-to-first-byte-ttfb/"
          }
        },
        {
          "testDocumentContent":  {
            "value": "You’ve come to the right place",
            "testType": "Contains"
          }
        } 
      ]
   },        
   {
     "name": "Navigate to new tab",
     "ignoreErrors": false,
     "recordWaterfall": false,
     "actions": [  
       { "click":   
         { 
           "element": {  
             "xpath": "//a[contains(.,'Dedicated hosting')]",
           },
           "description": "Click on a hyperlink (Dedicated hosting)"
         }
      },
      { 
        "testDocumentContent": {  
          "value": "dedicated server",
          "testType": "Contains" 
        }
      }
    ]
  },
  {
    "name": "Switch to first tab",
    "actions": [
      { "switchBrowserTab":  
        {  
          "windowTitle": "https://blog.uptrends.com"
        }
      },
      {  
        "testDocumentContent":
          {
            "value": "Attend a webinar",
            "testType": "Contains"
          }
        }
      ]
    }
  ]  
}