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

Switching iframes

When your user path includes interactions with an iframe 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 coversion process chose when converting your recording into a script.

When you upload the recording to your Uptrends account, Uptrends converts the recording to a script. During the conversion process, Uptrends does its best to choose the correct selector for the iframe. 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? Uptrends recognizes URLs with no problem, but for IDs and name attributes, Uptrends makes its best guess. If Uptrends chooses the wrong attribute type, you’ll need to fix the selector.

Note: Although you have the option to use the iframe index for identification (and the recorder often chooses this option for you), we don’t recommend that you use the iframe indexes because indexes change. Therefore, where applicable, IDs, names, and URLs make for better selectors.
Follow these instructions to add a switchmanually between the root and iframe documents.
  1. Click Add action to open the action selection dialog,
  2. Click Control: Switch frame to highlight your choice,
  3. Click Select, and
  4. Choose either
    • Subsequent actions will target the HTML root document. If you choose this option, no other information is needed.
    • Subsequent actions will target the following frame/Iframe.
      • Choose the identifier type and identifying value.
      • Continue adding frames switches if you need to access frames embedded in the iframe.
Note: Because iframes load after the root document, you may need to add a short wait action (4000 ms) to allow for the iframe to complete loading before you interact with the content.

Iframe switch example

In the iframe switch example, we navigate through Uptrends’ demo scheduler. The script

  1. Opens the demo page,
  2. Does a content check,
  3. Clicks to choose a consultant for the demo,
  4. Takes a brief pause to make sure the iframe on the new page has loaded completely,
  5. Does another content check,
  6. Clicks a link to navigate to the calendar,
  7. Checks for content, and
  8. Closes the iframe 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, and
  4. Chose either the unique Page title (the title displayed on the tab) or unique URL. You can use a partial 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.

Note: Don’t forget to follow the tab switch with a content check. The content check makes sure you switched successfully.

Example tab switch script

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

  1. Opens an Uptrends Blog page,
  2. Confirms the correct page with a content check,
  3. Clicks an element that opens a new tab,
  4. Confirms the successful tab switch with a content check,
  5. Changes back to the previous tab, and
  6. Confirms 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"
          }
        }
      ]
    }
  ]
}