appetize io ultimate guide browser testing mobile apps

Advanced Browser Automation and Scripting with Appetize.io

Automation in Appetize.io bridges the gap between manual QA and fully automated pipelines, ensuring cross-browser and cross-device consistency without physical hardware dependencies. The following sections detail scripting techniques, API interactions, and integration with continuous integration tools, along with best practices for error handling and result retrieval.

Automating Interactions with JavaScript and Selenium WebDriver

JavaScript Injection
Appetize.io’s API permits injecting custom JavaScript into a live browser session, enabling dynamic manipulation of DOM elements, user gestures, and network conditions. This approach is ideal for lightweight automation or debugging scenarios where Selenium’s overhead is unnecessary.

Selenium WebDriver Integration
For structured test suites, Selenium WebDriver (via Appetize.io’s custom bindings) provides a standardized interface to automate interactions. WebDriver scripts can be executed in Node.js, Python, or Java, with Appetize.io acting as the remote browser target. This method is preferred for large-scale test automation due to its maintainability and compatibility with existing frameworks (e.g., Jest, Mocha, or TestNG).

Step-by-Step Guide to Automating Interactions

1. JavaScript Injection for Basic Automation
Inject scripts into a session using the `/api/v1/sessions/{session_id}/inject` endpoint. Example:

// Example: Simulate a tap on an element with ID "login-button"
const script = `
document.getElementById('login-button').click();
document.getElementById('username').value = 'testuser';
document.getElementById('password').value = 'secure123';
document.getElementById('login-form').submit();
`;
fetch(`https://api.appetize.io/v1/sessions/${sessionId}/inject`, {
method: 'POST',
headers: { 'X-Appetize-APIKey': 'YOUR_API_KEY' },
body: JSON.stringify({ script })
});

2. Selenium WebDriver Setup with Appetize.io
Configure a custom WebDriver remote endpoint pointing to Appetize.io’s API. Below is a Node.js example using the `webdriverio` library:

const { remote } = require('webdriverio');

(async () => {
const driver = await remote({
capabilities: {
browserName: 'chrome',
platformName: 'Android',
version: 'latest',
'appetize:apiKey': 'YOUR_API_KEY',
'appetize:device': 'iPhone 12',
},
logLevel: 'info',
});

await driver.url('https://example.com/login');
await driver.$('#username').setValue('testuser');
await driver.$('#password').setValue('secure123');
await driver.$('#login-button').click();
await driver.pause(2000); // Simulate human delay
await driver.deleteSession();
})();

3. Handling Gestures and Dynamic Content
Appetize.io supports touch events via JavaScript. To simulate a swipe:

const swipeScript = `
const element = document.querySelector('.swipeable-element');
const startX = element.offsetLeft + element.offsetWidth / 2;
const endX = startX + 200;
const startY = element.offsetTop + element.offsetHeight / 2;

const touchStart = new Touch({ clientX: startX, clientY: startY });
const touchEnd = new Touch({ clientX: endX, clientY: startY });

element.dispatchEvent(new TouchEvent('touchstart', { touches: [touchStart] }));
element.dispatchEvent(new TouchEvent('touchmove', { touches: [touchEnd] }));
element.dispatchEvent(new TouchEvent('touchend', { touches: [] }));
`;

4. Network and Performance Monitoring
Inject scripts to log network requests or simulate throttled conditions:

// Log all XHR requests
const networkScript = `
const originalXHROpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
console.log('XHR Request:', method, url);
return originalXHROpen.apply(this, arguments);
};
`;

Integrating Appetize.io with CI/CD Pipelines

Key Considerations for CI/CD Integration

Step-by-Step CI/CD Integration Guide

name: Appetize.io Browser Tests
on: [push, pull_request]

jobs:
test:
runs-on: ubuntu-latest
steps:

2. Jenkins Pipeline Integration
Configure a Jenkinsfile to orchestrate Appetize.io tests:

pipeline {
agent any
environment {
APPETIZE_API_KEY = credentials('appetize-api-key')
}
stages {
stage('Run Browser Tests') {
steps {
script {
def sessionId = sh(
script: """
curl -X POST "https://api.appetize.io/v1/sessions" \
-H "X-Appetize-APIKey: ${APPETIZE_API_KEY}" \
-H "Content-Type: application/json" \
-d '{
"device": "iPhone 12",
"url": "https://example.com",
"script": "document.querySelector(\"button\").click();"
}',
returnStdout: true
).trim()
echo "Session ID: ${sessionId}"
// Poll for results or wait for completion
}
}
}
}
}

3. Handling Test Results in CI/CD
Parse Appetize.io’s API responses to extract test outcomes. Example Node.js script to fetch session results:

const fetchResults = async (sessionId) => {
const response = await fetch(`https://api.appetize.io/v1/sessions/${sessionId}`, {
headers: { 'X-Appetize-APIKey': 'YOUR_API_KEY' },
});
const data = await response.json();
if (data.status === 'completed') {
console.log('Test Results:', data.result);
if (data.result.failed) {
console.error('Test Failed! Screenshots:', data.screenshots);
}
}
};

Appetize.io API Endpoints for Automation