Connect & Get help from fellow developers on our Discord community.
Ask the Community
Examples of Browser configuration at snapshot level
This page provides sample examples for specifying browser configuration at snapshot level.
Check out the examples for different supported frameworks and languages.
Selenium
```javascript
await percySnapshot(page, 'Snapshot Name',
{
widths: [768, 1200],
browsers: ['chrome', 'chrome_on_android', 'safari_on_iphone']
}
);
```
Copy icon
Copy
```python
percy_snapshot(
driver,
'Home Page',
widths=[768, 1200],
browsers=['chrome', 'chrome_on_android', 'firefox']
)
```
Copy icon
Copy
```java
percy = new Percy(page);
Map<String, Object> options = new HashMap<>();
options.put("testCase", "Should add product to cart");
browsers = new ArrayList<>(); // Initialize the list
browsers.add("chrome");
browsers.add("chrome_on_android");
browsers.add("safari_on_iphone");
# add under the key browers
options.puts("browsers", browsers)
percy.snapshot("snapshot Name", options);
```
Copy icon
Copy
Playwright
```javascript
await percySnapshot(page, 'Snapshot Name',
{
widths: [768, 1200],
browsers: ['chrome', 'chrome_on_android', 'safari_on_iphone']
}
);
```
Copy icon
Copy
```python
percy_snapshot(
driver,
'Home Page',
widths=[768, 1200],
browsers=['chrome', 'chrome_on_android', 'firefox']
)
```
Copy icon
Copy
```java
percy = new Percy(page);
Map<String, Object> options = new HashMap<>();
options.put("testCase", "Should add product to cart");
String[] browsers = {"firefox", "chrome_on_android", "safari_on_iphone"};
options.puts("browsers", browsers)
percy.snapshot("snapshot_2", options);
```
Copy icon
Copy
Nightwatch
```
browser
.url(TEST_URL)
.sendKeys('.new-todo', 'New fancy todo')
.sendKeys('.new-todo', browser.Keys.ENTER)
.assert.containsText('.todo-list li:first-child label', 'New fancy todo')
.percySnapshot('Snapshot Name', {
widths: [1200],
percyCss: 'body { background-color: red !important }',
browsers: ['chrome', 'chrome_on_android', 'safari_on_iphone']
});
```
Copy icon
Copy
Storybook
```
App.parameters = {
// take additional snapshots of various states
percy: {
browsers: ['chrome', 'firefox', 'safari_on_iphone'],
additionalSnapshots: [{
suffix: ' - Active',
args: { showTodos: 'active' }
},{
suffix: ' - Completed',
args: { showTodos: 'completed' }
}, {
suffix: ' - None',
args: { todos: [] }
}]
}
};
```
Copy icon
Copy
Is this page helping you?
Thank you for your valuable feedback!
Ask the Community