App PercyConfigure and customizeRunning with hybrid apps

Running with hybrid apps

A guide to run with hybrid apps

Appium Java

For a hybrid app, we need to switch to native context before taking screenshot.

Add a helper method similar to the following example for say flutter based hybrid app:

```Java
public void percyScreenshotFlutter(AppPercy appPercy, AppiumDriver driver, String name, ScreenshotOptions options) {
    // switch to native context
    driver.context("NATIVE_APP");
    appPercy.screenshot(name, options);
    // switch back to flutter context
    driver.context("FLUTTER");
}
```

        
            Copy icon
            
          
        Copy
      
    public void percyScreenshotFlutter(AppPercy appPercy, AppiumDriver driver, String name, ScreenshotOptions options) {
    // switch to native context
    driver.context("NATIVE_APP");
    appPercy.screenshot(name, options);
    // switch back to flutter context
    driver.context("FLUTTER");
}

  

Call percyScreenshotFlutter helper function when you want to take screenshot:

```Java
percyScreenshotFlutter(appPercy, driver, name, options);
```

            Copy icon
            
        Copy
      
    percyScreenshotFlutter(appPercy, driver, name, options);

Note: For other hybrid apps the driver.context(“FLUTTER”); would change to context that it uses like say WEBVIEW etc.

Appium Python

Appium uses capabilities configuration to decide which devices to run your tests on. BrowserStack has a helpful Appium capabilities builder that can help you set things up. Your Percy capabilities can look something like this:

```Python
pixel_4 = {
  "deviceName": "Google Pixel 4",
  "app": '<APP URL>', # replace app url with the URL you received in step 1
  "appium:percyOptions": {
    "enabled": True # True by default. This can be used to disable visual testing for certain devices
  },
  'bstack:options' : {
    "projectName" : "My Project",
    "buildName" : "test percy_screnshot",
    "sessionName" : "BStack first_test",
    "userName" : USER_NAME, # set your App Automate username
    "accessKey" : ACCESS_KEY # set your App Automate password
  },
  "platformName": "android",
}

desired_caps = [pixel_4] # you can define as many devices as you want in capabilites
```

        
            Copy icon
            
          
        Copy
      
    pixel_4 = {
  "deviceName": "Google Pixel 4",
  "app": '<APP URL>', # replace app url with the URL you received in step 1
  "appium:percyOptions": {
    "enabled": True # True by default. This can be used to disable visual testing for certain devices
  },
  'bstack:options' : {
    "projectName" : "My Project",
    "buildName" : "test percy_screnshot",
    "sessionName" : "BStack first_test",
    "userName" : USER_NAME, # set your App Automate username
    "accessKey" : ACCESS_KEY # set your App Automate password
  },
  "platformName": "android",
}
desired_caps = [pixel_4] # you can define as many devices as you want in capabilites

  

Percy options are rather powerful. To further configure capabilities for Percy, look at this document.

For a hybrid app, we need to switch to native context before taking screenshot.

Add a helper method similar to the following example for say flutter based hybrid app:

```Python
def percy_screenshot_flutter(driver, name: str, **kwargs):
  driver.switch_to.context('NATIVE_APP')
  percy_screenshot(driver, name, **kwargs)
  driver.switch_to.context('FLUTTER')
```

        
            Copy icon
            
          
        Copy
      
    def percy_screenshot_flutter(driver, name: str, **kwargs):
  driver.switch_to.context('NATIVE_APP')
  percy_screenshot(driver, name, **kwargs)
  driver.switch_to.context('FLUTTER')

  

Call percyScreenshotFlutter helper function when you want to take screenshot:

Copy

percy_screenshot_flutter(driver, name, **kwargs)

Note: For other hybrid apps the driver.switch_to.context(‘FLUTTER’) would change to context that it uses like say WEBVIEW etc.

Appium Javascript

For a hybrid app, we need to switch to native context before taking screenshot.

Add a helper method similar to the following example for say flutter based hybrid app:

```Javascript
async function percyScreenshotFlutter(driver, name, options) {
  // switch to native context
  await driver.switchContext('NATIVE_APP');
  await percyScreenshot(driver, name, options);
  // switch back to flutter context
  await driver.switchContext('FLUTTER');
}
```

        
            Copy icon
            
          
        Copy
      
    async function percyScreenshotFlutter(driver, name, options) {
  // switch to native context
  await driver.switchContext('NATIVE_APP');
  await percyScreenshot(driver, name, options);
  // switch back to flutter context
  await driver.switchContext('FLUTTER');
}

  

Call percyScreenshotFlutter helper function when you want to take screenshot:

```Javascript
await percyScreenshotFlutter(driver, name[, {
  fullscreen,
  deviceName,
  orientation,
  statusBarHeight,
  navigationBarHeight
}])
```

        
            Copy icon
            
          
        Copy
      
    await percyScreenshotFlutter(driver, name[, {
  fullscreen,
  deviceName,
  orientation,
  statusBarHeight,
  navigationBarHeight
}])

  

Note: For other hybrid apps the await driver.switchContext(‘FLUTTER’); would change to context that it uses like say WEBVIEW etc.

WebdriverIO Javascript

For a hybrid app, we need to switch to native context before taking screenshot.

Add a helper method similar to the following example for say flutter based hybrid app:

```Javascript
async function percyScreenshotFlutter(driver, name, options) {
  // switch to native context
  await driver.switchContext('NATIVE_APP');
  await percyScreenshot(driver, name, options);
  // switch back to flutter context
  await driver.switchContext('FLUTTER');
}
```

        
            Copy icon
            
          
        Copy
      
    async function percyScreenshotFlutter(driver, name, options) {
  // switch to native context
  await driver.switchContext('NATIVE_APP');
  await percyScreenshot(driver, name, options);
  // switch back to flutter context
  await driver.switchContext('FLUTTER');
}

  

Call percyScreenshotFlutter helper function when you want to take screenshot:

```Javascript
await percyScreenshotFlutter(driver, name[, {
  fullscreen,
  deviceName,
  orientation,
  statusBarHeight,
  navigationBarHeight
}])
```

        
            Copy icon
            
          
        Copy
      
    await percyScreenshotFlutter(driver, name[, {
  fullscreen,
  deviceName,
  orientation,
  statusBarHeight,
  navigationBarHeight
}])

  

Note: For other hybrid apps the await driver.switchContext(‘FLUTTER’); would change to context that it uses like say WEBVIEW etc.

C Sharp

For a hybrid app, we need to switch to native context before taking screenshot.

Add a helper method similar to the following example for say flutter based hybrid app:

```C#
public void PercyScreenshotFlutter(AppPercy appPercy, AndroidDriver<AndroidElement> driver, String name, ScreenshotOptions options) {
    // switch to native context
    driver.Context = "NATIVE_APP";
    appPercy.Screenshot(name, options);
    // switch back to flutter context
    driver.Context = "FLUTTER";
}
```

        
            Copy icon
            
          
        Copy
      
    public void PercyScreenshotFlutter(AppPercy appPercy, AndroidDriver<AndroidElement> driver, String name, ScreenshotOptions options) {
    // switch to native context
    driver.Context = "NATIVE_APP";
    appPercy.Screenshot(name, options);
    // switch back to flutter context
    driver.Context = "FLUTTER";
}

  

Call percyScreenshotFlutter helper function when you want to take screenshot:

```C#
PercyScreenshotFlutter(appPercy, driver, name, options);
```

            Copy icon
            
        Copy
      
    PercyScreenshotFlutter(appPercy, driver, name, options);

Note: For other hybrid apps the driver.context(“FLUTTER”); would change to context that it uses like say WEBVIEW etc.

Did this page help you?

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked

This page has exactly what I am looking for
This content & code samples are accurate and up-to-date
The content on this page is easy to understand
Other (please tell us more below)

Any additional feedback?

Thank you for your valuable feedback

Is this page helping you?

Yes

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked

This page has exactly what I am looking for
This content & code samples are accurate and up-to-date
The content on this page is easy to understand
Other (please tell us more below)

Any additional feedback?

Thank you for your valuable feedback!