A fresh look for capability generator

We are excited to unveil a fresh look for capabilities, along with SDK configuration and improved navigation. Hope you love it as much as we do.

Capabilities

Capabilities are a series of key-value pairs that allow you to configure your tests on the BrowserStack cloud grid.

Capability generator

Other frameworks

WebdriverIO

WebdriverIO

Cypress

Cypress

Puppeteer

Puppeteer

Prefer old UI? Return to old experience

Capabilities reference gist file

Expand this section to check out the list of supported Capabilities 
# =============================================================================================================================
# Set BrowserStack Credentials
# =============================================================================================================================
userName: YOUR_USERNAME
accessKey: YOUR_ACCESS_KEY

# Set `framework` of your test suite. Example, `testng`, `cucumber`, `cucumber-testng`
framework: testng # Required only for java based frameworks

# =============================================================================================================================
# Parallels per Platform
# =============================================================================================================================
# The number of parallel threads to be used for each platform set.
# BrowserStack's SDK runner will select the best strategy based on the configured value
#
# Example 1 - If you have configured 3 platforms and set `parallelsPerPlatform` as 2, a total of 6 (2 * 3) parallel threads
# will be used on BrowserStack
#
# Example 2 - If you have configured 1 platform and set `parallelsPerPlatform` as 5, a total of 5 (1 * 5) parallel threads 
# will be used on BrowserStack
parallelsPerPlatform: 1

# =============================================================================================================================
# Platforms (Browsers / Devices to test)
# =============================================================================================================================
# Platforms object contains all the browser / device combinations you want to test on.

platforms:
  - os: OS X
    osVersion: Big Sur
    browserName: Chrome
    browserVersion: latest
    # ===============================================
    # Chrome Browser Specific Capabilities (OPTIONAL)
    # ===============================================
    chrome:
      driver: 112.0.5615.28
    chromeOptions: 
      args:                      
        - --start-maximized
    # ===============================================  
  - os: Windows
    osVersion: 11
    browserName: Edge
    browserVersion: latest
    # ===============================================
    # Edge Browser Specific Capabilities (OPTIONAL)
    # ===============================================
    edge: 
      enablePopups: false #<boolean> (Default: X) Set to true if you want to enable Popups
      enableSidebar: false #<boolean> (Default: X) Set to true if you want to enable sidebar
    # ===============================================        
  - os: Windows
    osVersion: 10
    browserName: Firefox
    browserVersion: latest
    # ===============================================
    # Firefox Browser Specific Capabilities (OPTIONAL)
    # ===============================================
    firefox: 
      driver: 0.32.0 #Set the driver version you want to use
    # ===============================================        
  - os: OS X
    osVersion: Big Sur
    browserName: Safari
    browserVersion: 14.1
    # ===============================================
    # Safari Browser Specific Capabilities (OPTIONAL)
    # ===============================================
    safari:
      driver: 2.45 #Set the driver version you want to use
      enablePopups: false #<boolean> (Default: X) Set to true if you want to enable Popups
      allowAllCookies: false #<boolean> (Default: false) Set to true if you want to allow all cookies
    # ===============================================        

# =============================================================================================================================
# BrowserStack Reporting 
# =============================================================================================================================
#Set 'projectName' to the name of your project.
projectName: BrowserStack Samples 

#Set 'projectName' to the name of your project.
buildName: browserstack build 

# buildIdentifier` is a unique id to differentiate every execution that gets appended to buildName. 
# Choose your buildIdentifier format from the available expressions:
# ${BUILD_NUMBER} (Default): Generates an incremental counter with every execution
# ${DATE_TIME}: Generates a Timestamp with every execution. Eg. 05-Nov-19:30
buildIdentifier: '${BUILD_NUMBER}'

# =============================================================================================================================
# BrowserStack Local (For localhost, staging/private websites)
# =============================================================================================================================

# Set browserStackLocal to true if your website under test is not accessible publicly over the internet
browserstackLocal: true # <boolean> (Default true)
# Options to be passed to BrowserStack local in-case of advanced configurations
browserStackLocalOptions:
  forcelocal: true  # <boolean> (Default: false) Set to true to resolve all your traffic via BrowserStack Local tunnel.
  localIdentifier: randomstring # <string> (Default: null) Needed if you need to run multiple instances of local.
  proxyHost: 127.0.0.1 
  proxyPort: 8000
  proxyUser: user
  proxyPass: password
  -pac-file: <pac_file_abs_path> #<string> Pass the absolute path of PAC file for proxy server related decisioning
  f: /my/awesome/folder # <string> Pass the path of test HTML files on BrowserStack local.
  verbose: 3
  -use-ca-certificate: <path_to_pem_file>
  -use-system-installed-ca: true
  -log-file: <path_to_log_file>

# =============================================================================================================================
# Debugging features
# =============================================================================================================================
debug: false # <boolean> # Set to true if you need screenshots for every selenium command ran
networkLogs: false # <boolean> Set to true to enable HAR logs capturing
consoleLogs: errors # <string> Remote browser's console debug levels to be printed (Default: errors)
# Available options are `disable`, `errors`, `warnings`, `info`, `verbose` (Default: errors)  

# =============================================================================================================================
# TEST CONFIGURATION CAPABILITIES
# =============================================================================================================================
video: true
seleniumLogs: true
telemetryLogs: true
geoLocation: CN
timezone: New_York 
resolution: 1024x768
idleTimeout: 30
maskCommands: setValues, getValues, setCookies, getCookies
maskBasicAuth: true
autoWait: 35
hosts: 1.2.3.4 staging.website.com
bfcache: 1
wsLocalSupport: true
disableCorsRestrictions: true
httpProxy: http://user:[email protected]:1234  #Add the proxy parameters in the adjacent format to use httpProxy
httpsProxy: https://user:[email protected]:1234  #Add the proxt parameters in the adjacent format to use httpsProxy
# =============================================================================================================================
# MOBILE SPECIFIC CAPABILITIES
# =============================================================================================================================

# Set the screen orientation of mobile device.
deviceOrientation: portrait # select between portrait/landscape
# Required if you want to simulate the custom network condition.
customNetwork: 1000 #download speed (kbps), upload speed (kbps), latency (ms), packet loss (%)
# Required if you want to simulate different network conditions.
networkProfile: 2g-gprs-good #(select between multiple options)

# =============================================================================================================================
# BROWSER SPECIFIC CAPABILITIES
# =============================================================================================================================

# Browser specific capabilities have to be strictly placed with respective platform capabilites inside the platforms object 

# ===============================================
# Chrome Browser Specific Capabilities
# ===============================================
# platforms:
#   - os: OS X
#     osVersion: Big Sur
#     browserName: Chrome
#     browserVersion: latest
#     #Chrome specific capabilities
#     chrome: 
#       driver: 112.0.5615.28
#     chromeOptions: 
#       args:                      
#         - incognito
#         - --start-maximized
#       perfLoggingPrefs:
#       enableNetwork: false

# ===============================================
# Edge Browser Specific Capabilities 
# ===============================================
# platforms:
#   - os: Windows
#     osVersion: 11
#     browserName: Edge
#     browserVersion: 111.0
#     # Edge specific capabilities
#     edge: 
#       enablePopups: false #<boolean> (Default: X) Set to true if you want to enable Popups
#       enableSidebar: false #<boolean> (Default: X) Set to true if you want to enable sidebar

# ===============================================
# Safari Browser Specific Capabilities 
# ===============================================
# platforms:
#   - os: OS X
#     osVersion: Big Sur
#     browserName: Safari
#     browserVersion: 14.1
#     # Safari Specific Capabilities (OPTIONAL)
#     safari:
#       driver: 2.45 #Set the driver version you want to use
#       enablePopups: false #<boolean> (Default: X) Set to true if you want to enable Popups
#       allowAllCookies: false #<boolean> (Default: false) Set to true if you want to allow all cookies

# ===============================================
# Firefox Browser Specific Capabilities 
# ===============================================

# platforms:
#   - os: Windows
#     osVersion: 10
#     browserName: Firefox
#     browserVersion: latest
#   # Firefox specific capabilities (Optional)
#     firefox: 
#       driver: 0.32.0 #Set the driver version you want to use

# ===============================================
# IE Browser Specific Capabilities 
# ===============================================      
# platforms:
#   - os: Windows
#     osVersion: 10
#     browserName: IE
#     browserVersion: 11.0
#     # IE specific capabilities (OPTIONAL)
#     ie: 
#       driver: 4.0.0 
#       noFlash: false #<boolean> (Default: X) Set to true if you want to enable flash
#       compatibility: <value>
#       arch: <value>
#       enablePopups: false #<boolean> (Default: X) Set to true if you want to enable Popups
#       enableSidebar: false #<boolean> (Default: X) Set to true if you want to enable sidebar
#       sendKeys: true #<boolean> (Default: X) Allows to type content automatically into editable field while executing tests.


# =============================================================================================================================
# Test Reporting & Analytics
# =============================================================================================================================

# Test Reporting & Analytics is an intelligent test reporting & debugging product. It collects data using the SDK.
# Visit automation.browserstack.com to see your test reports and insights. To disable Test Reporting & Analytics, 
# specify `testObservability: false` in the key below.
# Read about what data is collected at https://www.browserstack.com/docs/test-reporting-and-analytics/references/terms-and-conditions
testObservability: true

Capabilities Reference

Test configuration capabilities  
W3C-Capability Values
projectName
Allows the user to specify a name for a logical group of builds.		 Default: Untitled Project

Example: BrowserStack Sample
buildName
Allows the user to specify a name for a logical group of tests.		 Default: Untitled Build

Example: browserstack-build-1
sessionName
Allows the user to specify an identifier for the test run.		 Example: logintest
local
Use this capability to test your locally hosted websites on BrowserStack by setting the value to true. To enable access to the local machine you need to setup BrowserStack Local binary.		 true, false
Default: false

Example: {"bstack:options":{"local":true}}
localIdentifier
Use this capability to specify the unique Local Testing connection name in your test.		 String
Default: false

Example: local_connection_name
debug
Required if you want to generate screenshots at various steps in your test.		 true, false
Default: false
consoleLogs
Required if you want to capture browser console logs at various steps in your test. Console Logs are available for Selenium tests on Desktop Chrome and Mobile Chrome (Android devices).		 disable, errors, warnings, info, verbose
Default: errors

disable: stops capturing the console logs
errors: shows only error output in console
warnings: shows warning and error output in the console
info: shows info statement, warning and error output in the console
verbose: shows all console output
networkLogs
Required if you want to capture network logs for your test. Network Logs are supported for all desktop browsers, Android and iOS devices with a few exceptions - IE 10 on any OS; IE 11 on Windows 7 / 8.1 and any browser on MacOS High Sierra and Mojave.		 true, false
Default: false

Note: You may experience minor reductions in performance when testing with Network Logs turned on with Desktop sessions.
appiumLogs
Required if you want to capture raw appium logs for your test.		 true, false
Default: true
video
Required if you want to enable video recording during your test.		 true, false
Default: true
seleniumLogs
Required if you want to enable selenium logs for your desktop browser tests.		 true, false
Default: true
telemetryLogs
Required if you want to capture telemetry logs for your test. Telemetry Logs are supported for all desktop browsers on any OS except for Windows XP and all MacOS versions below Sierra.		 true, false
Default: false

Example: {"bstack:options":{"telemetryLogs":true}}

Note: Only Selenium versions 4.0.0-alpha-6 and above are supported.
geoLocation
Use this capability to simulate website and mobile behavior from different locations. Traffic to your website or mobile app will originate from an IP address hosted in the country you have chosen.		 “CN” for China, “FR” for France, “IN” for India and “US” for United States of America and so on. View the list of 65+ supported countries.

Example: {"bstack:options":{"geoLocation":"CN"}}

Note: This capability is available with enterprise plans only.
timezone
Use this capability to run your tests on a custom timezone.		 New_York for America/New_York, London for Europe/London, Kolkata for Asia/Kolkata. Set the city name as value.

You can view the complete list of timezones on Wikipedia. Example: {"bstack:options":{"timezone":"New_York"}}

Note: This feature is not supported on the following devices: [“Oppo Reno 6”, “Xiaomi Redmi Note 9”, “Xiaomi Redmi Note 11”, “Huawei P30”, “Huawei P30”, “Huawei P30”, “Oppo Reno 3 Pro”, “Realme 8”, “Xiaomi Redmi Note 10S”, “Xiaomi Redmi Note 7 Pro”, “Xiaomi Redmi Note 12 Pro Plus”, “Xiaomi Redmi Note 12 Pro”, “Xiaomi Redmi Note 12 4G”, “Xiaomi Redmi Note 10 Pro”, “Xiaomi Redmi Note 9 Pro Max”, “Xiaomi Redmi Note 5 Pro”]
resolution
Set the resolution of VM before beginning of your test.		 Windows (XP): 800x600, 1024x768, 1280x800, 1280x1024, 1366x768, 1440x900, 1680x1050, 1600x1200, 1920x1200, 1920x1080, 2048x1536, 2560x1600, 2800x2100

Windows (7):800x600, 1024x768, 1280x800, 1280x1024, 1366x768, 1440x900, 1680x1050, 1600x1200, 1920x1200, 1920x1080, 2048x1536, 2560x1600, 2800x2100, 3840x2160

Windows (8,8.1,10,11): 1024x768, 1280x800, 1280x1024, 1366x768, 1440x900, 1680x1050, 1600x1200, 1920x1200, 1920x1080, 2048x1536, 2560x1600, 2800x2100, 3840x2160

OS X (Tahoe,Sequoia,Sonoma,Ventura,Monterey,Big Sur,Catalina,Mojave,High Sierra): 1024x768, 1280x960, 1280x1024, 1600x1200, 1920x1080, 2560x1440, 2560x1600, 3840x2160

OS X (All other versions): 1024x768, 1280x960, 1280x1024, 1600x1200, 1920x1080

Default:1920x1080
seleniumVersion
Use this capability to set the Selenium WebDriver version in test scripts.		 “3.7.0”, “3.7.1”, “3.8.0”, “3.8.1”, “3.9.0”, “3.9.1”, “3.10.0”, “3.11.0”, “3.12.0”, “3.13.0”, “3.14.0”, “3.141.0”, “3.141.5”, “3.141.59”, “4.0.0”, “4.1.0”, “4.1.2”, “4.2.2”, “4.3.0”, “4.4.0”, “4.5.0”, “4.6.0”, “4.7.2”, “4.8.0”, “4.9.1”, “4.10.0”, “4.11.0”, “4.12.1”, “4.13.0”, “4.14.1”, “4.15.0”, “4.16.1”, “4.17.0”, “4.18.1”, “4.19.1”, “4.20.0”, “4.21.0”, “4.22.0”, “4.23.0”, “4.24.0”, “4.25.0”, “4.26.0”, “4.27.0”, “4.28.0”, “4.29.0”
Note: Latest jar might not be compatible with older browsers.
browserstack.maskCommands Use this capability to mask the data sent or retrieved by certain commands. Default:Empty array

setValues
All the text send via sendKeys command will be redacted.

getValues
All the text retrieved via get command will be redacted.

setCookies
All the cookies which are set by the addCookie command will be redacted.

getCookies
All the cookie values obtained using the getCookies and getCookieNamed command will be redacted.

Example:
browserstackOptions.put(“maskCommands”, “setValues, getValues, setCookies, getCookies”);

Note: You can pass multiple commands in a single array, separated by commas. Sensitive data in certain logs (like Selenium, Appium, video, etc.) cannot be masked. View our documentation to disable these logs instead.
idleTimeout
BrowserStack triggers BROWSERSTACK_IDLE_TIMEOUT error when a session is left idle for more than 90 seconds. This happens as BrowserStack by default waits for the timeout duration for additional steps or commands to run, if we do not receive any command during that time, the session is stopped, changing the session status to TIMEOUT on the Automate dashboard.

This capability can be used to modify the timeout value.		 0 to 300 seconds
Default: 90 seconds

Example: {"bstack:options":{"idleTimeout":30}}
maskBasicAuth
If you use basic authentication in your test cases, the username and password would be visible in text logs. Use this capability to mask those credentials.		 true, false
Default: false

To mask the credentials set the capability to “true”.
Example: {"bstack:options":{"maskBasicAuth":true}}
autoWait
Use this capability to specify a custom delay between the execution of Selenium commands.		 Default: 20 seconds

Example: {"bstack:options":{"autoWait":35}}
hosts
Use this capability to add host entry (/etc/hosts) in remote BrowserStack machine.

For example, if you use staging.website.com in test cases but do not have a DNS entry for the domain and the public IP, you can use this capability to add host entry in the machine.		 <IP_address Domain_name>

Example: { “bstack:options”: { “hosts”: “1.2.3.4 staging.website.com;5.6.7.8 internal.website.com;8.9.10.11 preprod.website.com” } }

Note: Supported only on desktop machines.
bfcache
IE 11 browser uses cached pages when you navigate using the backward or forward browser buttons. You can use this capability to disable the use of cached pages.		 0 and 1
Default: 0

To disable page caching set value as 1
Example: {"bstack:options":{"bfcache":1}}
wsLocalSupport
Chrome browser v71 and above have changed the way PAC files are supported. Use this capability to enable WSS (WebSocket Secure) connections to work with Network Logs on Chrome browser v71 and above.

If you are using localhost in your test, change it to bs-local.com		 true, false
Default: false

Example: {"bstack:options":{"wsLocalSupport":true}}

Note: This capability is only valid for Chrome browsers v71 and above.
disableCorsRestrictions
Use this capability to disable cross origin restrictions in Safari. Available for Tahoe, Sequoia, Sonoma, Ventura, Monterey, Big Sur, Catalina and Mojave.		 true, false
Default: false

Example: {"bstack:options":{"disableCorsRestrictions":true}}
buildTag
Use this capability to add a custom tag to the builds. These tags can be used to filter the builds on the Automate dashboard.
View Documentation		 Example: {"buildTag":"My Build Tag"}
Mobile capabilities  
W3C-Capability Values
deviceName
Specifies a particular mobile device for the test environment.		 View the list of supported devices.
appiumVersion
Use this capability to set the Appium version in your test scripts.		 Android: 2.0.1 , 1.22.0 (default Appium version), 1.21.0 , 1.20.2 , 1.19.1 , 1.18.0 , 1.17.0 (default on Android 5 and above), 1.16.0 , 1.15.0 , 1.14.0 , 1.8.0 (default on OS version 4.4)
iOS: 2.0.1 , 1.22.0, 1.21.0 , 1.20.2 , 1.19.1 , 1.18.0 , 1.17.0 (default on iOS 12, 13 and 14), 1.16.0 , 1.14.0 , 1.8.0 , 1.7.0 (default on iOS 10 and 11)

Note: All values are strings.
os
OS you want to test.		 ios, android
deviceOrientation
Set the screen orientation of mobile device.		 portrait, landscape
Default: portrait
customNetwork
Required if you want to simulate the custom network condition.		 Example (‘1000’, ‘1000’, ‘100’, ‘1’)
download speed (kbps), upload speed (kbps), latency (ms), packet loss (%)

Note: The supported operating systems are iOS and Android.
networkProfile
Required if you want to simulate different network conditions.		 Example Example: 2g-gprs-good, 2g-gprs-lossy, 3g-umts-good etc.
View the list of supported network profiles.

Note: The supported operating systems are iOS and Android. no-network capability is available on all android devices and in ios v11 and above devices. The airplane-mode capability is only available on android devices.
Selenium capabilities  
W3C-Capability Values
browserName
Run your tests on a specific browser by setting the browser name as the value.		 Firefox, Safari, IE, Chrome, Opera, Edge, Chromium

Example: {"browserName":"Chrome"}
browserVersion
Run your tests on a specific browser version by setting the browser version as the value.
 latest-beta, latest, latest-1, latest-2 or so on.
Use latest-beta or latest [-n number] format to automatically choose the current beta release of the browser or the latest (and other older) browser versions available on BrowserStack without having to change code. A common use case is to run tests on the latest browser versions and the beta versions for frequently updated browsers such as Chrome and Firefox.
Example: {"browserVersion", "latest"}

Specific browser version
Pass a particular browser version number.
Example: {"browserVersion", "11.0"} // for IE-11 browser

Default: Latest stable version of browser is used.

Note: latest-beta, latest, latest-1, and other latest flags are dependent on the selected OS and OS Version. For example, on Windows 10, IE browser, the latest version would be 11.0, and on OS X Mojave, Safari browser, the latest version would be 12.0

View the list of latest browser versions.
acceptSslCerts
Use this capability to ignore invalid certificate error in your test.		 true, false
Default: false
Deprecated capabilities  
Deprecated capability Alternate capability
geckodriver
This capability specifies the geckodriver version to be used with the Firefox browser.		 firefox.driver
ie.alternateProxy
This capability is used to set a proxy on the Internet Explorer browser.		 local
tunnel
This capability is used to test your locally hosted websites on BrowserStack. To enable access to the local machine you need to setup BrowserStack Local binary.		 local
maskSendKeys
The input provided in the test would be visible in text logs. This capability is used to mask these input keys.		 maskCommands
selenium.jar.version
This capability is used to set the Selenium WebDriver version in test scripts.		 seleniumVersion
Parameter override rules
- osVersion can only be defined when os has been defined.

- Default browser is Chrome when no browser is passed by the user or the Selenium API (implicitly).

- If consoleLogs is enabled it will take precedence over Logging Preferences of type BROWSER that you may have set in your test script.
`; } ``; if (`selenium-jsonwp` == value) { reference_container.innerHTML = `Selenium - JSONWP`; chosen_container.innerHTML = `Selenium - JSONWP Selenium - JSONWP`; table_container.innerHTML = `
BrowserStack specific capabilities  
Capability Values
browserstack.user
For running your Selenium and Appium tests on BrowserStack, it requires a username and an access key for authenticating the user. This capability can be used to set the username.		 You can find your username and access key on the Settings page under the Automate section.

Example: "browserstack.user": "<BROWSERSTACK_USERNAME>"
browserstack.key
For running your Selenium and Appium tests on BrowserStack, it requires a username and an access key for authenticating the user. This capability can be used to set the access key.		 You can find your username and access key on the Settings page under the Automate section.

Example: "browserstack.key": "<BROWSERSTACK_ACCESSKEY>"
os
OS you want to test.		 Windows, OS X
os_version
OS version you want to test.		 Windows: XP, 7, 8, 8.1, 10 and 11
OS X: Snow Leopard, Lion, Mountain Lion, Mavericks, Yosemite, El Capitan, Sierra, High Sierra, Mojave, Catalina, Big Sur, Monterey, Ventura, Sonoma, Sequoia and Tahoe
browser
Run your tests on a specific browser by setting the browser name as the value.		 Firefox, Safari, IE, Chrome, Opera, Edge, Chromium

Example: “browser”: “Chrome”
browserVersion
Run your tests on a specific browser version by setting the browser version as the value.		 latest-beta, latest, latest-1, latest-2 or so on..
Use latest-beta or latest [-n number] format to automatically choose the current beta release of the browser or the latest (and other older) browser versions available on BrowserStack without having to change code. A common use case is to run tests on the latest browser versions and the beta versions for frequently updated browsers such as Chrome and Firefox.
Example: caps.setCapability("browser_version", "latest");

Specific browser version
Pass a particular browser version number.
Example: caps.setCapability("browser_version", "11.0"); // for IE-11 browser

Default: Latest stable version of browser is used.

Note: latest-beta, latest, latest-1, and other latest flags are dependent on the selected OS and OS Version. For example, on Windows 10, IE browser, the latest version would be 11.0, and on OS X Mojave, Safari browser, the latest version would be 12.0

View the list of latest browser versions.
browserstack.use_w3c
Run your Selenium tests in W3C mode. If this is enabled, we assume that your Selenium capabilities are compliant with the W3C-spec.		 true, false
Default:false
Note: W3C is currently supported on Firefox version 53 and above for Selenium versions: “3.7.0”, “3.7.1”, “3.8.0”, “3.8.1”, “3.9.0”, “3.9.1”, “3.10.0”, “3.11.0”, “3.12.0”, “3.13.0”, “3.14.0”, “3.141.0”, “3.141.5”, “3.141.59”, “4.0.0”, “4.1.0”, “4.1.2”, “4.2.2”, “4.3.0”, “4.4.0”, “4.5.0”, “4.6.0”, “4.7.2”, “4.8.0”, “4.9.1”, “4.10.0”, “4.11.0”, “4.12.1”, “4.13.0”, “4.14.1”, “4.15.0”, “4.16.1”, “4.17.0”, “4.18.1”, “4.19.1”, “4.20.0”, “4.21.0”, “4.22.0”, “4.23.0”, “4.24.0”, “4.25.0”, “4.26.0”, “4.27.0”, “4.28.0”, “4.29.0”
Note: Latest jar might not be compatible with older browsers.
   
Test configuration capabilities  
Capability Values
project
Allows the user to specify a name for a logical group of builds.		 Example: project: loginformproject

Default: Untitled Project
build
Allows the user to specify a name for a logical group of tests.		 Example: build: build 4.5

Default: Untitled Build
name
Allows the user to specify an identifier for the test run.		 Example: name: logintest
browserstack.local
Use this capability to test your locally hosted websites on BrowserStack by setting the value to true. To enable access to the local machine you need to setup BrowserStack Local binary.		 true, false
Default: false

Example: "browserstack.local": true
browserstack.localIdentifier
Use this capability to specify the unique Local Testing connection name in your test.		 String
Example: local_connection_name
browserstack.debug
Required if you want to generate screenshots at various steps in your test.		 true, false
Default: false
browserstack.console
Required if you want to capture browser console logs at various steps in your test. Console Logs are available for Selenium tests on Desktop Chrome and Mobile Chrome (Android devices).		 disable, errors, warnings, info, verbose
Default: errors

disable: stops capturing the console logs
errors: shows only error output in console
warnings: shows warning and error output in the console
info: shows info statement, warning and error output in the console
verbose: shows all console output
browserstack.networkLogs
Required if you want to capture network logs for your test. Network Logs are supported for all desktop browsers, Android and iOS devices with a few exceptions - IE 10 on any OS; IE 11 on Windows 7 / 8.1 and any browser on MacOS High Sierra and Mojave.		 true, false
Default: false

Note: You may experience minor reductions in performance when testing with Network Logs turned on with Desktop sessions.
browserstack.networkLogsOptions
Use this capability to configure Network logs. You can configure logs to capture request and response payload.		 Default: Empty JSON

captureContent
Captures request and response payload in network logs. To enable this property, set captureContent to TRUE. By default, it is set to FALSE.

For example, the following Java snippet will enable payload capture in network logs:

DesiredCapabilities caps = new DesiredCapabilities();
HashMap networkLogsOptions = new HashMap<>();
networkLogsOptions.put(“captureContent”, Boolean.TRUE);
caps.setCapability(“browserstack.networkLogs”, “true”);
caps.setCapability(“browserstack.networkLogsOptions”, networkLogsOptions);
browserstack.appiumLogs
Required if you want to capture raw appium logs for your test.		 true, false
Default: true
browserstack.video
Required if you want to enable video recording during your test.		 true, false
Default: true
browserstack.seleniumLogs
Required if you want to enable selenium logs for your desktop browser tests.		 true, false
Default: true
browserstack.telemetryLogs
Required if you want to capture telemetry logs for your test. Telemetry Logs are supported for all desktop browsers on any OS except for Windows XP and all MacOS versions below Sierra.		 true, false
Default: false

Example: "browserstack.telemetryLogs": true

Note: Only Selenium versions 4.0.0-alpha-6 and above are supported.
browserstack.geoLocation
Use this capability to simulate website and mobile behavior from different locations. Traffic to your website or mobile app will originate from an IP address hosted in the country you have chosen.		 “CN” for China, “FR” for France, “IN” for India and “US” for United States of America and so on. View the list of 65+ supported countries.

Example: "browserstack.geoLocation": "CN"

Note: This capability is available with enterprise plans only.
browserstack.timezone
Use this capability to run your tests on a custom timezone.		 New_York for America/New_York, London for Europe/London, Kolkata for Asia/Kolkata. Set the city name as value.

You can view the complete list of timezones on Wikipedia. Example: "browserstack.timezone": "New_York"

Note: This feature is not supported on the following devices: [“Oppo Reno 6”, “Xiaomi Redmi Note 9”, “Xiaomi Redmi Note 11”, “Huawei P30”, “Huawei P30”, “Huawei P30”, “Oppo Reno 3 Pro”, “Realme 8”, “Xiaomi Redmi Note 10S”, “Xiaomi Redmi Note 7 Pro”, “Xiaomi Redmi Note 12 Pro Plus”, “Xiaomi Redmi Note 12 Pro”, “Xiaomi Redmi Note 12 4G”, “Xiaomi Redmi Note 10 Pro”, “Xiaomi Redmi Note 9 Pro Max”, “Xiaomi Redmi Note 5 Pro”]
resolution
Set the resolution of VM before beginning of your test.		 Windows (XP): 800x600, 1024x768, 1280x800, 1280x1024, 1366x768, 1440x900, 1680x1050, 1600x1200, 1920x1200, 1920x1080, 2048x1536, 2560x1600, 2800x2100

Windows (7):800x600, 1024x768, 1280x800, 1280x1024, 1366x768, 1440x900, 1680x1050, 1600x1200, 1920x1200, 1920x1080, 2048x1536, 2560x1600, 2800x2100, 3840x2160

Windows (8,8.1,10,11): 1024x768, 1280x800, 1280x1024, 1366x768, 1440x900, 1680x1050, 1600x1200, 1920x1200, 1920x1080, 2048x1536, 2560x1600, 2800x2100, 3840x2160

OS X (Tahoe,Sequoia,Sonoma,Ventura,Monterey,Big Sur,Catalina,Mojave,High Sierra): 1024x768, 1280x960, 1280x1024, 1600x1200, 1920x1080, 2560x1440, 2560x1600, 3840x2160

OS X (All other versions): 1024x768, 1280x960, 1280x1024, 1600x1200, 1920x1080

Default:1920x1080
Note: You can also resize/maximize browser windows during test execution. See how
browserstack.selenium_version
Use this capability to set the Selenium WebDriver version in test scripts.		 “2.37.0”, “2.40.0”, “2.41.0”, “2.42.1”, “2.42.2”, “2.43.1”, “2.44.0”, “2.45.0”, “2.46.0”, “2.47.1”, “2.48.2”, “2.49.0”, “2.50.0”, “2.51.0”, “2.52.0”, “2.53.0”, “2.53.1”, “3.0.0-beta1”, “3.0.0-beta2”, “3.0.0-beta4”, “3.0.0”, “3.0.1”, “3.1.0”, “3.2.0”, “3.3.0”, “3.3.1”, “3.4.0”, “3.5.2”, “3.5.3”, “3.6.0”, “3.7.0”, “3.7.1”, “3.8.0”, “3.8.1”, “3.9.0”, “3.9.1”, “3.10.0”, “3.11.0”, “3.12.0”, “3.13.0”, “3.14.0”, “3.141.0”, “3.141.5”, “3.141.59”, “4.0.0”, “4.1.0”, “4.1.2”, “4.2.2”, “4.3.0”, “4.4.0”, “4.5.0”, “4.6.0”, “4.7.2”, “4.8.0”, “4.9.1”, “4.10.0”, “4.11.0”
Default:2.53.0 ( 2.45.0 for Safari )
Note: OS X Snow Leopard does not support versions 2.47.1 and higher. Default for OS X Snow Leopard: 2.45.0
browserstack.maskCommands Use this capability to mask the data sent or retrieved by certain commands. Default:Empty array

setValues
All the text send via sendKeys command will be redacted.

getValues
All the text retrieved via get command will be redacted.

setCookies
All the cookies which are set by the addCookie command will be redacted.

getCookies
All the cookie values obtained using the getCookies and getCookieNamed command will be redacted.

Example:
caps.setCapability(“browserstack.maskCommands”, “setValues, getValues, setCookies, getCookies”);

Note: You can pass multiple commands in a single array, separated by commas. Sensitive data in certain logs (like Selenium, Appium, video, etc.) cannot be masked. View our documentation to disable these logs instead.
browserstack.idleTimeout
BrowserStack triggers BROWSERSTACK_IDLE_TIMEOUT error when a session is left idle for more than 90 seconds. This happens as BrowserStack by default waits for the timeout duration for additional steps or commands to run, if we do not receive any command during that time, the session is stopped, changing the session status to TIMEOUT on the Automate dashboard.

This capability can be used to modify the timeout value.		 0 to 300 seconds
Default: 90 seconds

Example: "browserstack.idleTimeout": 120
browserstack.maskBasicAuth
If you use basic authentication in your test cases, the username and password would be visible in text logs. Use this capability to mask those credentials.		 true, false
Default: false

To mask the credentials set the capability to “true”.
Example: "browserstack.maskBasicAuth": true
browserstack.autoWait
Use this capability to specify a custom delay between the execution of Selenium commands.		 Default: 20 seconds

Example: "browserstack.autoWait": 35
browserstack.hosts
Use this capability to add host entry (/etc/hosts) in remote BrowserStack machine.

For example, if you use staging.website.com in test cases but do not have a DNS entry for the domain and the public IP, you can use this capability to add host entry in the machine.		 <IP_address Domain_name>

Example: “browserstack.hosts”: “1.2.3.4 staging.website.com;5.6.7.8 internal.website.com;8.9.10.11 preprod.website.com”

Note: Supported only on desktop machines.
browserstack.bfcache
IE 11 browser uses cached pages when you navigate using the backward or forward browser buttons. You can use this capability to disable the use of cached pages.		 0 and 1
Default: 0

To disable page caching set value as 1
Example: "browserstack.bfcache": 1
browserstack.wsLocalSupport
Chrome browser v71 and above have changed the way PAC files are supported. Use this capability to enable WSS (WebSocket Secure) connections to work with Network Logs on Chrome browser v71 and above.

If you are using localhost in your test, change it to bs-local.com		 true, false
Default: false

Example: "browserstack.wsLocalSupport": true

Note: This capability is only valid for Chrome browsers v71 and above.
browserstack.disableCorsRestrictions
Use this capability to disable cross origin restrictions in Safari. Available for Tahoe, Sequoia, Sonoma, Ventura, Monterey, Big Sur, Catalina and Mojave.		 true, false
Default: false

Example: "browserstack.disableCorsRestrictions": true
buildTag
Use this capability to add a custom tag to the builds. These tags can be used to filter the builds on the Automate dashboard.
View Documentation		 Example: { "buildTag": "My Build Tag" }
Mobile capabilities  
Capability Values
device
Specifies a particular mobile device for the test environment.		 View the list of supported devices.
browserstack.appiumVersion
Use this capability to set the Appium version in your test scripts.		 Android: 1.22.0 (default Appium version), 1.21.0 , 1.20.2 , 1.19.1 , 1.18.0 , 1.17.0 (default on Android 5 and above), 1.16.0 , 1.15.0 , 1.14.0 , 1.8.0 (default on OS version 4.4)
iOS: 1.22.0, 1.21.0 , 1.20.2 , 1.19.1 , 1.18.0 , 1.17.0 (default on iOS 12, 13 and 14), 1.16.0 , 1.14.0 , 1.8.0 , 1.7.0 (default on iOS 10 and 11)

Note: All values are strings.
os
OS you want to test.		 ios, android
browser
Browser you want to test.		 iPad, iPhone, Android
deviceOrientation
Set the screen orientation of mobile device.		 portrait, landscape
Default: portrait
browserstack.customNetwork
Required if you want to simulate the custom network condition.		 Example (‘1000’, ‘1000’, ‘100’, ‘1’)
download speed (kbps), upload speed (kbps), latency (ms), packet loss (%)

Note: The supported operating systems are iOS and Android.
browserstack.networkProfile
Required if you want to simulate different network conditions.		 Example Example: 2g-gprs-good, 2g-gprs-lossy, 3g-umts-good etc.
View the list of supported network profiles.

Note: The supported operating systems are iOS and Android. no-network capability is available on all android devices and in ios v11 and above devices. The airplane-mode capability is only available on android devices.
Selenium capabilities  
Capability Values
platform
OS you want to test.		 MAC, WIN8, XP, WINDOWS, ANY, ANDROID.

Default: ANY
browserName
Browser you want to test.		 firefox, chrome, internet explorer, safari, opera, edge, iPad, iPhone, android

Default: chrome
browserVersion
Run your tests on a specific browser version by setting the browser version as the value.		 latest-beta, latest, latest-1, latest-2 or so on.
Use latest-beta or latest [-n number] format to automatically choose the current beta release of the browser or the latest (and other older) browser versions available on BrowserStack without having to change code. A common use case is to run tests on the latest browser versions and the beta versions for frequently updated browsers such as Chrome and Firefox.
Example: {"browserVersion", "latest"}

Specific browser version
Pass a particular browser version number.
Example: {"browserVersion", "11.0"} // for IE-11 browser

Default: Latest stable version of browser is used.

Note: latest-beta, latest, latest-1, and other latest flags are dependent on the selected OS and OS Version. For example, on Windows 10, IE browser, the latest version would be 11.0, and on OS X Mojave, Safari browser, the latest version would be 12.0

View the list of latest browser versions.
acceptSslCerts
Use this capability to ignore invalid certificate error in your test.		 true, false
Default: false
Deprecated capabilities  
Deprecated capability Alternate capability
browserstack.geckodriver
This capability specifies the geckodriver version to be used with the Firefox browser.		 browserstack.firefox.driver
browserstack.ie.alternateProxy
This capability is used to set a proxy on the Internet Explorer browser.		 browserstack.local
browserstack.tunnel
This capability is used to test your locally hosted websites on BrowserStack. To enable access to the local machine you need to setup BrowserStack Local binary.		 browserstack.local
browserstack.maskSendKeys
The input provided in the test would be visible in text logs. This capability is used to mask these input keys.		 browserstack.maskCommands
browserstack.selenium.jar.version
This capability is used to set the Selenium WebDriver version in test scripts.		 browserstack.selenium_version
Parameter override rules
- osVersion can only be defined when os has been defined.

- Default browser is Chrome when no browser is passed by the user or the Selenium API (implicitly).

- If consoleLogs is enabled it will take precedence over Logging Preferences of type BROWSER that you may have set in your test script.
`; } ``; if (`selenium-sdk` == value) { reference_container.innerHTML = `Selenium - BrowserStack SDK`; chosen_container.innerHTML = `Selenium - BrowserStack SDK Selenium - BrowserStack SDK`; table_container.innerHTML = `
BrowserStack specific capabilities  
SDK-Capability Values
userName
For running your Selenium and Appium tests on BrowserStack it, requires a username and an access key for authenticating the user. This capability can be used to set the username.		 You can find your username and access key on the Settings page under the Automate section.

Example: userName: <BROWSERSTACK_USERNAME>
accessKey
For running your Selenium and Appium tests on BrowserStack it, requires a username and an access key for authenticating the user. This capability can be used to set the access key.		 You can find your username and access key on the Settings page under the Automate section.

Example: accessKey: <BROWSERSTACK_ACCESSKEY>
os
OS you want to test.		 Windows, OS X
osVersion
OS version you want to test.		 Windows: XP, 7, 8, 8.1, 10 and 11
OS X: Snow Leopard, Lion, Mountain Lion, Mavericks, Yosemite, El Capitan, Sierra, High Sierra, Mojave, Catalina, Big Sur, Monterey, Ventura, Sonoma, Sequoia and Tahoe

Example:

platforms:
  - os: Windows
       osVersion: 10
Test configuration capabilities  
SDK-Capability Values
projectName
Allows the user to specify a name for a logical group of builds.		 Default: Untitled Project

Example: projectName: BrowserStack Sample
buildName
Allows the user to specify a name for a logical group of tests.		 Default: Untitled Build

Example: buildName: browserstack-build-1
browserstackLocal
Use this capability to test your locally hosted websites on BrowserStack by setting the value to true. To enable access to the local machine you need to setup BrowserStack Local binary.		 true, false
Default: false

Example: browserstackLocal: true
localIdentifier
Use this capability to specify the unique Local Testing connection name in your test.		 String
Default: false

Example:
browserStackLocalOptions:
   localIdentifier: local_connection_name
debug
Required if you want to generate screenshots at various steps in your test.		 true, false
Default: false

Example: debug: false
consoleLogs
Required if you want to capture browser console logs at various steps in your test. Console Logs are available for Selenium tests on Desktop Chrome and Mobile Chrome (Android devices).		 disable, errors, warnings, info, verbose
Default: errors

Example: consoleLogs: errors

disable: stops capturing the console logs
errors: shows only error output in console
warnings: shows warning and error output in the console
info: shows info statement, warning and error output in the console
verbose: shows all console output
networkLogs
Required if you want to capture network logs for your test. Network Logs are supported for all desktop browsers, Android and iOS devices with a few exceptions - IE 10 on any OS; IE 11 on Windows 7 / 8.1 and any browser on MacOS High Sierra and Mojave.		 true, false
Default: false

Example: networkLogs: false

Note: You may experience minor reductions in performance when testing with Network Logs turned on with Desktop sessions.
video
Required if you want to enable video recording during your test.		 true, false
Default: true

Example: video: true
seleniumLogs
Required if you want to enable selenium logs for your desktop browser tests.		 true, false
Default: true
telemetryLogs
Required if you want to capture telemetry logs for your test. Telemetry Logs are supported for all desktop browsers on any OS except for Windows XP and all MacOS versions below Sierra.		 true, false
Default: false

Example: telemetryLogs: true

Note: Only Selenium versions 4.0.0-alpha-6 and above are supported.
geoLocation
Use this capability to simulate website and mobile behavior from different locations. Traffic to your website or mobile app will originate from an IP address hosted in the country you have chosen.		 “CN” for China, “FR” for France, “IN” for India and “US” for United States of America and so on. View the list of 65+ supported countries.

Example: geoLocation: CN

Note: This capability is available with enterprise plans only.
timezone
Use this capability to run your tests on a custom timezone.		 New_York for America/New_York, London for Europe/London, Kolkata for Asia/Kolkata. Set the city name as value.

You can view the complete list of timezones on Wikipedia. Example: timezone: New_York

Note: This feature is not supported on the following devices: [“Oppo Reno 6”, “Xiaomi Redmi Note 9”, “Xiaomi Redmi Note 11”, “Huawei P30”, “Huawei P30”, “Huawei P30”, “Oppo Reno 3 Pro”, “Realme 8”, “Xiaomi Redmi Note 10S”, “Xiaomi Redmi Note 7 Pro”, “Xiaomi Redmi Note 12 Pro Plus”, “Xiaomi Redmi Note 12 Pro”, “Xiaomi Redmi Note 12 4G”, “Xiaomi Redmi Note 10 Pro”, “Xiaomi Redmi Note 9 Pro Max”, “Xiaomi Redmi Note 5 Pro”]
resolution
Set the resolution of VM before beginning of your test.		 Windows (XP): 800x600, 1024x768, 1280x800, 1280x1024, 1366x768, 1440x900, 1680x1050, 1600x1200, 1920x1200, 1920x1080, 2048x1536, 2560x1600, 2800x2100

Windows (7):800x600, 1024x768, 1280x800, 1280x1024, 1366x768, 1440x900, 1680x1050, 1600x1200, 1920x1200, 1920x1080, 2048x1536, 2560x1600, 2800x2100, 3840x2160

Windows (8,8.1,10,11): 1024x768, 1280x800, 1280x1024, 1366x768, 1440x900, 1680x1050, 1600x1200, 1920x1200, 1920x1080, 2048x1536, 2560x1600, 2800x2100, 3840x2160

OS X (Tahoe,Sequoia,Sonoma,Ventura,Monterey,Big Sur,Catalina,Mojave,High Sierra): 1024x768, 1280x960, 1280x1024, 1600x1200, 1920x1080, 2560x1440, 2560x1600, 3840x2160

OS X (All other versions): 1024x768, 1280x960, 1280x1024, 1600x1200, 1920x1080

Default:1920x1080

Example: resolution: 1024x768
maskCommands Use this capability to mask the data sent or retrieved by certain commands. Default:Empty array

setValues
All the text send via sendKeys command will be redacted.

getValues
All the text retrieved via get command will be redacted.

setCookies
All the cookies which are set by the addCookie command will be redacted.

getCookies
All the cookie values obtained using the getCookies and getCookieNamed command will be redacted.

Example:
maskCommands: setValues, getValues, setCookies, getCookies

Note: You can pass multiple commands in a single array, separated by commas. Sensitive data in certain logs (like Selenium, Appium, video, etc.) cannot be masked. View our documentation to disable these logs instead.
idleTimeout
BrowserStack triggers BROWSERSTACK_IDLE_TIMEOUT error when a session is left idle for more than 90 seconds. This happens as BrowserStack by default waits for the timeout duration for additional steps or commands to run, if we do not receive any command during that time, the session is stopped, changing the session status to TIMEOUT on the Automate dashboard.

This capability can be used to modify the timeout value.		 0 to 300 seconds
Default: 90 seconds

Example: idleTimeout: 30
maskBasicAuth
If you use basic authentication in your test cases, the username and password would be visible in text logs. Use this capability to mask those credentials.		 true, false
Default: false

To mask the credentials set the capability to “true”.
Example: maskBasicAuth: true
autoWait
Use this capability to specify a custom delay between the execution of Selenium commands.		 Default: 20 seconds

Example: autoWait: 35
hosts
Use this capability to add host entry (/etc/hosts) in remote BrowserStack machine.

For example, if you use staging.website.com in test cases but do not have a DNS entry for the domain and the public IP, you can use this capability to add host entry in the machine.		 <IP_address Domain_name>

Example: hosts: 1.2.3.4 staging.website.com

Note: Supported only on desktop machines.
bfcache
IE 11 browser uses cached pages when you navigate using the backward or forward browser buttons. You can use this capability to disable the use of cached pages.		 0 and 1
Default: 0

To disable page caching set value as 1
Example: bfcache: 1
wsLocalSupport
Chrome browser v71 and above have changed the way PAC files are supported. Use this capability to enable WSS (WebSocket Secure) connections to work with Network Logs on Chrome browser v71 and above.

If you are using localhost in your test, change it to bs-local.com		 true, false
Default: false

Example: wsLocalSupport: true

Note: This capability is only valid for Chrome browsers v71 and above.
disableCorsRestrictions
Use this capability to disable cross origin restrictions in Safari. Available for Tahoe, Sequoia, Sonoma, Ventura, Monterey, Big Sur, Catalina and Mojave.		 true, false
Default: false

Example: disableCorsRestrictions: true
Mobile capabilities  
SDK-Capability Values
deviceName
Specifies a particular mobile device for the test environment.		 Example:

platforms:
   - deviceName: iPhone 13
View the list of supported devices.
deviceOrientation
Set the screen orientation of mobile device.		 portrait, landscape
Default: portrait

Example: deviceOrientation: portrait
customNetwork
Required if you want to simulate the custom network condition.		 Example: customNetwork: 1000

Note: The supported operating systems are iOS and Android.
networkProfile
Required if you want to simulate different network conditions.		 Example: networkProfile: 2g-gprs-good
View the list of supported network profiles.

Note: The supported operating systems are iOS and Android. no-network capability is available on all android devices and in ios v11 and above devices. The airplane-mode capability is only available on android devices.
Browser capabilities  
SDK-Capability Values
browserName
Run your tests on a specific browser by setting the browser name as the value.		 Firefox, Safari, IE, Chrome, Opera, Edge, Chromium
browserVersion
Run your tests on a specific browser version by setting the browser version as the value.

Note: browserVersion capability is applicable for desktop browsers only.		 latest-beta, latest, latest-1, latest-2 or so on.
Use latest-beta or latest [-n number] format to automatically choose the current beta release of the browser or the latest (and other older) browser versions available on BrowserStack without having to change code. A common use case is to run tests on the latest browser versions and the beta versions for frequently updated browsers such as Chrome and Firefox.

Example:

platforms:
  - os: Windows
       osVersion: 11
       browserName: Chrome
       browserVersion: 103.0

Specific browser version
Pass a particular browser version number.
Example:

browserVersion: 11.0 #for IE-11 browser

Default: Latest stable version of browser is used.

Note: latest-beta, latest, latest-1, and other latest flags are dependent on the selected OS and OS Version. For example, on Windows 10, IE browser, the latest version would be 11.0, and on OS X Mojave, Safari browser, the latest version would be 12.0

View the list of latest browser versions.
Parameter override rules
- osVersion can only be defined when os has been defined.

- Default browser is Chrome when no browser is passed by the user or the Selenium API (implicitly).

- If consoleLogs is enabled it will take precedence over Logging Preferences of type BROWSER that you may have set in your test script.
`; } ``; }; const getEnvBasedlink = () => { let guessedStage = ''; const hostname = window.location.hostname; const urlParams = new URLSearchParams(window.location.search); if (hostname.includes('k8s-stagace')) { guessedStage = 'https://k8s-stagace.bsstag.com/capability-builder'; } else if (hostname.includes('k8s-stagcypressqa')) { guessedStage = 'https://k8s-stagcypressqa.bsstag.com/capability-builder'; } else if (hostname.includes('k8s')) { guessedStage = 'https://k8s.bsstag.com/capability-builder'; } else if (hostname.includes('local')) { guessedStage = 'http://localhost:3001/capability-builder/'; } else { guessedStage = 'https://www.browserstack.com/capability-builder'; } const currentUrl = window.location.href; if (currentUrl.includes('app-automate')) { guessedStage += '?product=app_automate'; } else if (currentUrl.includes('automate')) { if (urlParams.has('framework')) { guessedStage += `?product=automate&framework=${urlParams.get('framework')}`; } } return guessedStage; }; const capabilityHandler = ({ payload, parent }) => { if (payload) { updateReferenceData(payload.id); } }; const eventHandler = ({ payload, parent }) => { if (window.util) window.util.logEvent(payload.eventName, payload.payload); }; const setIframeHeight = ({ payload, parent }) => { const iframe = document.querySelector('[data-id = capability-iframe]'); iframe.height = payload.height; }; const closeCapabilityBanner = () => { window.util.logEvent('AtmCapBuilder_BannerDismiss', { source: 'New Capability Builder' }); localStorage.setItem('isCapabilityBannerClosed', true); const capabilityBanner = document.querySelector('.capability_container__top-banner') capabilityBanner.style.display = 'none'; } const redirectToOldCapabilityBuilder = e => { if (e.type !== 'click' && e.keyCode !== 13) return; window.util.logEvent('AtmCapBuilder_SwitchToOld_Click', { source: 'New Capability Builder' }) localStorage.setItem('selectedCapabilityBuilder', 'old'); window.location.href = '/automate/capabilities'; } // message passing const EXECUTION_HANDLER = { capability_handler: capabilityHandler, // it will handle the updation of content related data that will be updated based to fw/ integration method selected event_handler: eventHandler, iframe_height: setIframeHeight }; window.addEventListener('message', event => { const { origin, data, source: parent } = event; if (data) { const { type = null, payload = {} } = data; // if (origin !== TARGET_ORIGIN) return; need to add target origin check as well here if (type) { const executionHandler = EXECUTION_HANDLER[type]; if (typeof executionHandler === 'function') { executionHandler({ payload, parent }); } } } if (window.codeSnippetBuilder) { window.codeSnippetBuilder.setCodeContainer(); } }); document.addEventListener('DOMContentLoaded', () => { window.util.logEvent('AtmCapBuilder_New_Landing', { source: 'New Capability Builder' }); const iframe = document.querySelector('[data-id = capability-iframe]'); const navbar = document.querySelector('.marketing-header'); const header = document.querySelector('.capability_container__top-header'); const capabilityBanner = document.querySelector('.capability_container__top-banner') if (localStorage.getItem('isCapabilityBannerClosed')) { capabilityBanner.style.display = 'none'; } // add src to iframe based on location origin iframe.src = getEnvBasedlink(); // initial iframe loading height iframe.height = window.screen.height - header.clientHeight - 2 * navbar.clientHeight; updateReferenceData(); }); const closeButton = document.querySelector('.capability_container__banner--close-btn'); closeButton.onclick = closeCapabilityBanner; const oldCapsCta = document.querySelector('.capability_container__old-experience--btn__cta'); oldCapsCta.onclick = redirectToOldCapabilityBuilder; oldCapsCta.onkeydown = redirectToOldCapabilityBuilder;