Today we'll master JavaScript's power features to create professional test automation. From simple functions to complex async operations - everything through OpenCart testing scenarios.
Think about this: When testing OpenCart's checkout process, what happens if the payment gateway takes 3 seconds to respond?
In manual testing, you wait. In automation, we need to handle this intelligently!
// What if this takes 3 seconds?
const paymentResult = processPayment();
// How do we handle the delay?
String manipulation and operations
Building reusable test components
Why we need it in testing
Handling future results
Making async code readable
Functions are like reusable test components. Instead of writing the same login code 10 times, we write it once!
Imagine testing OpenCart's admin panel. You need to login before every test:
// Test 1: Check products
await page.goto('/admin');
await page.fill('#input-username', 'admin');
await page.fill('#input-password', 'password');
await page.click('button[type="submit"]');
// ... test logic
// Test 2: Check orders
await page.goto('/admin');
await page.fill('#input-username', 'admin');
await page.fill('#input-password', 'password');
await page.click('button[type="submit"]');
// ... test logicasync function loginToAdmin() {
await page.goto('/admin');
await page.fill('#input-username', 'admin');
await page.fill('#input-password', 'password');
await page.click('button[type="submit"]');
}
// Test 1: Check products
await loginToAdmin();
// ... test logic
// Test 2: Check orders
await loginToAdmin();
// ... test logicTraditional way to define functions
function loginToAdmin() {
// login logic
}Modern, concise function syntax
const loginToAdmin = () => {
// login logic
}Functions passed as parameters
function afterLogin(callback) {
// login logic
callback(); // Execute after login
}Click "Run Function" to see the result!
Which function type would you use for a reusable login function in your test suite?
Write a function called validateProductDetails that takes a product object and returns true if all required fields are present.
In web testing, everything takes time. Page loads, API calls, animations - we need to handle these delays intelligently.
Testing OpenCart's product search with filters:
// This fails because page isn't loaded yet
await page.click('#search-button');
await page.click('#filter-category'); // Error!Why it fails: The search results take 2 seconds to load, but our code tries to click the filter immediately.
// Wait for the page to be ready
await page.click('#search-button');
await page.waitForSelector('.product-grid');
await page.click('#filter-category'); // Success!Why it works: We wait for the product grid to appear before proceeding.
Web pages don't load instantly. Elements appear gradually.
Server responses take time. Payment processing, data fetching.
UI animations and transitions need time to complete.
Creating orders, updating inventory takes time.
Click a button to see the difference!
When testing a form submission that takes 3 seconds, what should you do?
Promises are like contracts. "I promise to give you a result when this operation completes."
Testing OpenCart's checkout process:
const paymentPromise = processPayment(orderData);
// paymentPromise is a "contract"// Promise is "pending" - processing...paymentPromise
.then(result => console.log('Payment successful!'))
.catch(error => console.log('Payment failed!'));Operation in progress
await page.click('#submit')
Operation completed successfully
// Element clicked successfully
Operation failed
// Element not found
Click steps to see the promise chain in action!
What happens if a promise is rejected in your test?
Async/await is syntactic sugar that makes promises look like regular synchronous code.
Let's compare different approaches to writing the same test:
loginToAdmin()
.then(() => searchProduct('iPhone'))
.then(() => addToCart())
.then(() => proceedToCheckout())
.then(() => fillShippingDetails())
.then(() => processPayment())
.then(() => verifyOrder())
.catch(error => console.error(error));async function completeCheckout() {
try {
await loginToAdmin();
await searchProduct('iPhone');
await addToCart();
await proceedToCheckout();
await fillShippingDetails();
await processPayment();
await verifyOrder();
console.log('Checkout completed!');
} catch (error) {
console.error('Checkout failed:', error);
}
}Code flows naturally, like reading a test script
Easy to set breakpoints and debug step by step
Simple try/catch blocks for error management
Even non-developers can understand the flow
Click to see the difference in execution flow!
What keyword do you use to wait for a promise to complete?
Write an async function that completes a full OpenCart purchase flow: