DEV Community: Hardik Chotaliya

How to Install Kiwi TCMS using Docker: Complete Guide for QA Professionals

Hardik Chotaliya — Fri, 29 Aug 2025 10:37:34 +0000

Introduction to Kiwi TCMS

In todays fast-paced software development world, quality assurance (QA) teams need efficient tools to manage test cases and ensure reliable releases. Among the many test case management systems available, Kiwi TCMS stands out as an open-source, web-based platform designed for modern QA workflows.

Deploying Kiwi TCMS using Docker makes installation, configuration, and maintenance seamless, even for large teams. In this guide, well walk step by step through the Kiwi TCMS Docker Installation process while sharing tips to help QA professionals get started quickly.

What is Kiwi TCMS?

Kiwi TCMS is an open-source test case management system that helps QA teams organize test plans, manage test runs, track results, and integrate with CI/CD pipelines. It offers:

A web-based user interface for managing test cases
REST APIs for automation
Integrations with popular tools like Jenkins, GitHub, and Bugzilla
Real-time reporting and dashboards

Why QA Professionals Use Kiwi TCMS

QA engineers choose Kiwi TCMS because it:

Centralizes test management in one accessible platform
Improves collaboration between testers, developers, and product owners
Supports agile workflows and automation testing pipelines
Reduces overhead by being lightweight and easy to deploy

Benefits of Using Docker for Kiwi TCMS

Using Docker simplifies Kiwi TCMS deployment in multiple ways:

Portability: Run Kiwi TCMS consistently across environments.
Quick Setup: No need to configure dependencies manually.
Isolation: Avoid conflicts with other applications.
Scalability: Spin up additional instances if required.

Prerequisites Before Installation

Before diving into the installation steps, make sure your system is prepared.

System Requirements

To run Kiwi TCMS in Docker smoothly, youll need:

A machine running Linux/macOS/Windows with WSL2
At least 2 GB of RAM and 2 CPU cores
Latest Docker Engine and Docker Compose installed

Verifying Docker and Docker Compose Installation

Check if Docker is installed and running:

docker --versiondocker-compose --version

If both return valid versions, youre good to go!

Step-by-Step Kiwi TCMS Docker Installation

Step 1: Create a Project Directory

mkdir ~/kiwi-tcmscd ~/kiwi-tcms

This ensures a dedicated workspace for configuration and data storage.

Step 2: Download the Docker Compose Configuration

Kiwi TCMS provides a ready-to-use docker-compose.yml file.

Option A: Direct Download

curl -O https://raw.githubusercontent.com/kiwitcms/Kiwi/master/docker-compose.yml

Option B: Create Manually

If you prefer, create a file named docker-compose.yml and copy the default configuration from the official Kiwi TCMS GitHub repository.

Step 3: Start Kiwi TCMS Containers

Navigate to the project directory and run:

docker compose up -d

This will:

Pull the required Docker images
Start Kiwi TCMS and MariaDB containers
Set up persistent volumes for database storage

Step 4: Verify Services are Running

docker compose psdocker compose logs -f

These commands help confirm that the containers are running without errors.

Step 5: Perform Initial Configuration

Before using Kiwi TCMS, you must initialize the system:

docker exec -it kiwi_web /Kiwi/manage.py initial_setup

Youll be asked to provide:

Username (e.g., namelastname)
Email (name.lastname@company.com)
Password (minimum 10 characters)
Domain name (e.g., tms)

Step 6: Access Kiwi TCMS Dashboard

Once the setup is complete, open your browser:

HTTPS (recommended): https://localhost
HTTP: http://localhost (auto-redirects to HTTPS)

Special Considerations for macOS Users

Handling SSL Certificate Warnings

Since Kiwi TCMS uses a self-signed SSL certificate, Safari/Chrome will display a warning. To resolve:

Select Advanced Proceed anyway
Install the certificate from https://localhost/static/ca.crt into your macOS keychain

Firewall and Network Troubleshooting

If you face connectivity issues, verify:

macOS Firewall settings under System Preferences Security & Privacy Firewall
Docker network configuration

Best Practices for Kiwi TCMS Deployment

Secure your instance by updating default settings and using strong passwords
Manage user accounts with role-based access
Automate backups using Docker volumes and scheduled tasks

Common Errors and Troubleshooting Tips

Containers wont start: Run docker compose logs to diagnose issues
Database errors: Ensure MariaDB is running and accessible
SSL issues: Reinstall the certificate or use a trusted CA

Frequently Asked Questions (FAQs)

Q1. What is Kiwi TCMS best used for?

A: Its best for managing test cases, test runs, and QA team workflows.

Q2. Can Kiwi TCMS integrate with CI/CD tools?

A: Yes, it integrates with Jenkins, GitHub Actions, and Bugzilla.

Q3. Is Docker mandatory for Kiwi TCMS?

A: No, but Docker is the simplest and most reliable method of installation.

Q4. How do I back up my Kiwi TCMS data?

A: Use Docker volumes and regular docker export commands.

Q5. Does Kiwi TCMS support multiple users?

A: Yes, it supports role-based access for QA teams of any size.

Q6. How do I update Kiwi TCMS in Docker?

A: Pull the latest image and restart containers with docker compose up -d.

Conclusion: Why Kiwi TCMS Docker Installation is Ideal for QA Teams

Deploying Kiwi TCMS using Docker is a fast, secure, and scalable approach that suits QA professionals of all experience levels. From installation to SSL handling, this guide equips you with everything needed to get started.

By combining the power of Docker with the flexibility of Kiwi TCMS , your QA team can efficiently manage test cases, streamline workflows, and improve software quality.

]]>

🎨 The Art of Writing Awesome Commit Messages for QA Engineers (SDETs/QA)

Hardik Chotaliya — Tue, 10 Dec 2024 07:40:54 +0000

Hey there, QA superstar! 🧪👨💻

Whether you're automating tests, debugging flaky scripts, or enhancing your framework, writing great commit messages can make or break your workflow. It's not just about getting the tests to passit's about leaving a clean, understandable trail for yourself and your team. Let's dive into why commit messages matter for us in QA and how to nail them every single time! 🚀

Why Should QA Folks Care About Commit Messages? 🤔

You might think, Isn't this just for developers? Nope! Automation Test Engineers have just as much to gain from writing clear, concise commit messages:

🕵 Debugging flaky tests becomes a breeze when you can trace changes easily.

📖 Understanding historical updates - why was that locator changed? Why was this test skipped?

🤝 Collaborating with Devs and other QAs is smoother when your changes are self-explanatory.

🔍 Root cause analysis - pinpointing where things went wrong in your test suite is faster when your history is clear.

A good commit message saves time , reduces confusion, and makes you look like a pro! 🌟

Good Commit Messages vs. Bad Ones 🎭

🚩 Bad Examples:

fix tests Which tests? What was broken? 😖
updated locators Why were they updated? 🔍
asdf Were calling the git police. 🚨

Good Examples:

🐛 Fix flaky login test by stabilizing wait conditions
🔧 Update locators for homepage redesign to match new structure
Add test cases in regression suite for checkout flow validation

The Anatomy of a Great Commit Message 🧪

A commit message should be clear, concise, and informative. Heres how to structure yours:

1 Start with a Type & Action Verb 📝

Use the present tense (e.g., Add, Fix, Update):

Add new test cases for API validation.

Fix flaky browser compatibility issues.

Update selectors for the redesigned checkout page.

2 Keep It Short (Under 50 Characters) 🕒

Your subject line should summarize the change in a snap:

Refactor tests for entire regression suite and add fixes to broken test cases along with updating browser drivers

🔧 Refactor regression suite for browser driver update

3 Add Context for Complex Changes 🖊

For more complicated commits, include a brief explanation:

🐛 Fix flaky login test for mobile devices Stabilized flaky test by adding explicit waits for DOM elements on slow networks.

4 Sprinkle Some Fun with Emojis! 🎉

Emojis can make your commits visually appealing and instantly recognizable:

🐛 Bug Fixes
🔧 Refactoring
New Feature or Enhancement
Test Addition
🛑 Test Skipped

Example:

🛑 Skip payment tests temporarily due to backend API downtime

Real-Life Examples for QA Engineers 💡

Add cross-browser tests for user registration flow
🐛 Fix flaky checkout test by increasing wait for payment API
🔧 Refactor locators for homepage due to UI overhaul
Enhance test framework to support parallel execution
🛑 Remove deprecated test cases for outdated features

When NOT to Use Emojis

While emojis are awesome, don't overdo it. Use them sparingly to keep your history professional yet fun. If your git log looks like hieroglyphics, its time to scale back! 🤓

Pro Tips for QA Commit Mastery 🏆

1 Commit Often, Commit Small

Break your changes into logical, testable units. Small commits are easier to understand and revert if needed.

2 One Commit, One Purpose

Dont mix framework updates with test case additions. Keep commits focused.

3 Link Issues or Tickets

If your org uses JIRA or similar tools, reference the ticket:

🔧 Update login tests (JIRA-123)

4 Dont Skip Commit Messages

Take a moment to write a meaningful commit message. Your future self will thank you! 🙌

Your Handy Commit Template 📝

Heres a cheat sheet to guide you:

# <Type & Summary> # Optional Body: # - Why is this change necessary? # - What exactly was changed? # - Link to any issues or tickets if applicable.

Example:

🐛 Fix flaky API test due to inconsistent response times Updated retry logic for API tests to handle sporadic timeout issues and added detailed logging for debugging.

Wrap-Up 🎁

Commit messages are more than a chore- they're a chance to showcase your professionalism and attention to detail. Follow these tips, and you'll not only help your team but also build a strong personal brand as a meticulous, thoughtful Automation Test Engineer.

So, next time you're about to commit, pause, breathe 🧘, and craft a message that youll be proud of! 🌟

Whats your favorite commit tip? Drop it in the comments! 👇

]]>

✨ Revolutionizing QA: Responsively App for Rapid Responsive Testing

Hardik Chotaliya — Fri, 06 Dec 2024 10:33:21 +0000

Introduction

In the fast-paced digital world, responsive web design is no longer optional! its a necessity. As QA professionals, ensuring a seamless user experience across multiple devices can be challenging.

Enter Responsively App , an open-source, powerful tool that transforms how you perform responsive testing. With its ability to preview websites across multiple viewports simultaneously, debug layout issues, and simulate real-world interactions, Responsively App is a game-changer for the QA community.

Why QA Teams Love Responsively App

QA teams often face tight deadlines and complex testing scenarios. Responsively App simplifies this process by enabling:

Simultaneous Multi-Device Testing

View your application across multiple devices in real-time to identify inconsistencies at a glance.
Live Reload for Instant Feedback

See the impact of code changes instantly, eliminating the need for constant browser refreshes.
Customizable Device Profiles

Tailor test environments for region-specific devices or customer preferences to ensure accurate results.
Responsive Inspector for Debugging

Pinpoint alignment issues, text truncation, or content overflow quickly, ensuring a polished end-user experience.

Step-by-Step Guide to Using Responsively App for QA

Download and Install the Responsively App

Visit Responsively App's website and download the latest version. Install it like any other application.
Test Across Multiple Viewports

Open the app, paste your website URL, and see it rendered across various screen sizesfrom mobile to tablet to desktop.
Debug with Responsive Inspector

Use the inspector tool to analyze how elements behave at different resolutions. Fix overlapping content or layout breaks efficiently.
Validate Interactivity with Real-World Simulation

Test touch gestures, scrolling, and click functionality directly within the app.
Customize Device Profiles

Adjust resolutions, and orientations, and even add custom devices to meet your testing needs.

Use Cases: How Responsively App Simplifies QA Tasks

Cross-Browser Compatibility Testing

Ensure your application delivers consistent user experiences across different browsers and devices.
Mobile-First Design Validation

Test designs on high-priority mobile devices to catch issues early in the development cycle.
Efficient Regression Testing

Save time by quickly verifying UI consistency after code changes.
Client-Specific Custom Testing

Add and test specific devices your clients audience frequently uses.

Benefits for the QA Community

Time-Saving: Speeds up testing cycles with simultaneous multi-viewport previews.
Cost-Effective: Free, open-source solution requiring no additional hardware.
Enhanced Accuracy: Provides precise insights into layout and interactivity issues.
Collaboration-Friendly: Easy to integrate into agile workflows for better team collaboration.

Conclusion

Responsively App is more than just a responsive testing tool; it's a productivity booster for QA professionals. By enabling multi-device testing, live reloading, and interactive debugging, it equips you with everything you need to deliver exceptional, bug-free user experiences.

So, why wait? Start using the Responsively App today and elevate your QA game to the next level.

]]>

🏆 Crafting the Perfect Tech Resume: A Guide for IT Professionals

Hardik Chotaliya — Mon, 25 Nov 2024 15:54:11 +0000

🏆 Why a Good Resume Matters

A strong resume is your ticket to landing that dream tech job. Its the first impression you make on recruiters, so crafting it carefully is crucial. Lets dive into tips to make your resume stand out!

🖋 Key Components of a Tech Resume

📄 Optimal Resume Length

Less than 7 years of experience: Keep it to one page. Concise and relevant is the way to go.
More than 7 years of experience: Two pages are acceptable, but be clear and to the point.

Resume Content Checklist

Include these essentials:

Header: Name, professional email, phone number, LinkedIn/GitHub links.
Work Experience: Highlight achievements over responsibilities.
Education: Relevant degrees or certifications.
Skills: Focus on technical and role-specific proficiencies.
Awards/Certifications: Showcase your expertise and commitment to learning.

🔄 Choosing the Right Words

Use action words like achieved, modernized, and resolved.
Quantify results (increased efficiency by 30%).
Avoid personal pronouns (I, my) and vague terms like hard worker.

🎨 Design Dos and Donts

Do:

Use readable fonts like Arial or Calibri.
Stick to one or two fonts for consistency.
Use a consistent colour paletteanalogous or complementary.

Dont:

Overuse colours or graphics.
Use distracting designs that hinder readability.

📝 How Recruiters Read Your Resume

Quick Scan Tips 👀

Recruiters spend 7-8 seconds scanning your resume initially. Place key information at the top.
Use clear headings and bullet points to guide their eyes.

Resume Formats

Reverse Chronological: Highlights recent roles; best for consistent work history.
Functional: Focuses on skills; ideal for career changers or gaps.
Combination: Blends experience and skills; great for seasoned professionals.

Insider Tip:

💡

Always include the month and year for job entries to avoid raising red flags.

What should be the length of my resume?

One Page Rule : If you have less than seven years of experience, your resume should be one page. This is because recruiters spend only a few seconds reviewing each resume, so concise and relevant information is crucial.
More Experience : If you have more than seven years of experience, you can extend your resume to two pages. However, it's still important to be clear and concise.
Relevance : Focus on including relevant information that highlights your achievements. Avoid long descriptions and stick to the most impactful points.
Personalization : Your resume should tell your professional story. This means you can play with different formats and sections to best represent yourself.
Recruiter's Perspective : Remember that recruiters will quickly scan your resume, so make sure the most important information is easy to find.

🖌 Structuring Your Tech Resume

📢 Header Section

Name: Use your full name.
Contact Info: Professional email and phone number.
Location: Include your city/state or country if applying internationally.
Links: Showcase LinkedIn, GitHub, or a personal portfolio.

🎓 Education Section

Recent Graduates: List at the top.
Experienced Professionals: Place below work experience.

Include:

College name, degree, and graduation year (optional).
Bootcamps or online courses.
Relevant coursework (if applicable).

💪 Work Experience Section

Structure: Reverse chronological order.
Details: Company name, job title, location, and employment dates.
Content: Use 2-3 bullet points to highlight key achievements:

📊 Skills Section

Organize skills into categories:

Tools: WebdriverIO, BrowserStack, AWS.
Languages: TypeScript, JavaScript.
Technologies: CI/CD, API testing, performance testing.
Proficiency Levels: Indicate expertise (e.g., Advanced, Intermediate).

📚 Extra Sections to Enhance Your Resume

🏅 Awards and Certifications

Awards: Highlight significant achievements with dates.
Certifications: Include technical and relevant certifications (e.g., AWS, Agile).

🖇 Summary Section

Summarize your expertise in 2-3 sentences. Example: Experienced Lead Quality Engineer specializing in automation and agile methodologies. Proven track record of enhancing software quality and team efficiency.

🔺 Avoid Adding a Photo

Stick to global best practices by omitting photos to avoid unconscious bias.

📁 File Format

Save as PDF to preserve formatting.
Name the file clearly: YourName_TechResume.pdf.

🛠 Tools for Crafting a Professional Resume

Microsoft Word/Google Docs: Use built-in templates.
Canva: For visually appealing designs.
ATS Checkers: Optimize your resume for Applicant Tracking Systems (e.g., CV Compiler).

🎨 Pro Design Rules for a Standout Resume

Typography 🌄

Use clear fonts (e.g., Arial, Calibri).
Maintain consistent font sizes for headings and body text.

Color Palette 🟡🔵

Analogous (harmonious) or complementary (balanced) colours.
Use darker colours for text and brighter ones for accents.

🏆 Final Tips for Success

Tailor your resume for each job application.
Focus on achievements, not just responsibilities.
Ensure your resume is error-freeproofread carefully.

By following these guidelines, youll craft a tech resume that grabs recruiters attention and lands you interviews for your dream role. 🏠🚀

ATS Resume Checker

After creating your resume, you can use a tool like CV Compiler to analyze and improve it. This tool will help you identify areas for enhancement, such as incorporating high-impact words and optimizing the format.

Additionally, you can leverage simple design tips like spacing, font choice, and colour palette to make your resume stand out. This will help you catch the recruiter's eye and increase your chances of landing a job interview in the software development industry.

]]>

📝 Mastering Test Data Generation: Tools, Tips, and Real-Life Experiences from a QA Pro 🧒

Hardik Chotaliya — Mon, 18 Nov 2024 17:57:44 +0000

Introduction

In software testing, test data is essential for creating realistic and effective scenarios. With over a decade of experience in quality assurance and automation testing, I've come to understand that having reliable test data goes beyond just fulfilling basic requirements; it involves developing datasets that accurately reflect real-world conditions. In this blog, I will share insights from my professional journey, including tools, plugins, and strategies that have saved countless hours and ensured comprehensive test coverage.

Why Test Data Matters in QA

In testing, realistic datasets elevate your scenarios from basic to bulletproof. Whether you're validating edge cases like names with special characters or testing specific demographics, well-crafted test data ensures you uncover potential issues before they reach production.

The Challenge of Crafting Realistic Test Data

Creating datasets manually can be daunting and time-consuming. Imagine needing thousands of users with unique parameters or edge cases like:

Users younger than 18 or older than 65.
Long, short, or special-character-rich names.
Inputs containing SQL injection examples or invalid HTML.

Relying on realistic, scalable test data tools has been a game-changer in my career.

My Go-To Tools for Test Data Generation

Generatedata

A versatile tool Ive used frequently to create bulk datasets with customizable parameters. Need specific age ranges or unique field constraints? Generatedata.com has you covered.

https://generatedata.com/

Mockaroo

Mockaroo excels at providing structured data in various formats, including CSV and JSON. Its perfect when importing test data directly into your system under test.

https://www.mockaroo.com/

Browser Plugins That Revolutionize Test Data Creation

Fake Data

A handy plugin for exploratory testing. With a single click, generate data like names, emails, and addresses with special characters, ensuring your form fields are tested thoroughly.

https://fakedata.pro/

Bug Magnet (My Favorite)

This Chrome plugin is an absolute powerhouse. It offers a variety of predefined datasets, SQL injection samples, broken HTML inputs, and multilingual characters. Bug Magnet has been my go-to tool for years, helping me uncover vulnerabilities that traditional testing often misses.

https://bugmagnet.org/

When Tools Fall Short: Collaborating with Development Teams

Sometimes, tools wont cut it. In such cases, collaborating with the development team is crucial. In a past project, our system lacked a data import feature. By working closely with the dev team, we built a bolt-on application to upload bulk data. This approach not only solved the problem but also strengthened interdepartmental collaboration.

Best Practices for Managing Test Data

Segment your data: Use distinct datasets for different test environments.
Mask sensitive information: Ensure compliance with data privacy regulations.
Automate data generation: Incorporate tools like Mockaroo into CI pipelines for automated, scalable data creation.
Version control your datasets: Use Git or similar tools to track changes in critical test datasets.

Conclusion: Empowering QA with the Right Tools

As a QA engineer, having the right test data at your fingertips is non-negotiable. Tools like Generatedata.com, Mockaroo, Fake Data, and Bug Magnet simplify data generation, enabling you to focus on testing. Where tools falter, collaboration with the dev team bridges the gap. With the strategies and tools shared here, you can build robust, scalable test frameworks that ensure application reliability.

Have you used these tools or plugins before? Share your favourite tips and tools for test data generation in the comments below! And don't forget to subscribe for more insider QA insights.

]]>

🔍 What is Behavior-Driven Development (BDD) 🛠️

Hardik Chotaliya — Wed, 30 Oct 2024 16:03:42 +0000

Introduction

In this blog, we will explore the following key points:

Understanding BDD : Learn the basics of behaviour-driven development (BDD) and how it enhances collaboration with non-technical teams.
Integration with Agile : Discover how BDD fits into an agile workflow and helps in building the right thing by focusing on user and system behaviour.
Practical Application : Get hands-on experience with BDD frameworks like Cucumber and Gherkin, including writing requirements specifications, defining scenarios, and setting up tests.
Best Practices : Explore best practices for implementing BDD, emphasizing domain-driven and object-oriented design, and keeping the philosophy of behavior over function at the forefront.

TDD History

The Dark Age of Developer Testing :

Background : In the early days of software development, developers were often separated from the testing process. A book from 1976, "Software Reliability," even suggested that developers should never test their own code.
Impact : This created tension between developers and QA teams, as developers were blamed for code failures.

Emergence of Test-Driven Development (TDD):

Origins : TDD emerged from Extreme Programming (XP), a methodology created by Kent Beck in the 1990s.
Process : TDD involves writing a test before writing the code to pass that test. The steps are:
Benefits : This approach helps developers build software iteratively and confidently, knowing that each piece of code is tested.

Challenges with TDD :

Questions : Developers often struggled with what to test and how much to test. Miscommunication about requirements was common, leading to confusion.

What is Behavior-driven Development?

Creator : Dan North introduced BDD in a 2006 blog post titled "Introducing BDD."
Concept : BDD builds on TDD by focusing on the behaviour of the software from the user's perspective. Instead of just writing tests, BDD encourages writing tests that describe the behavior of the system.
Terminology : North suggested using the term "Behavior" instead of "Test" to make it clearer what the software should do. This shift helps both technical and non-technical stakeholders understand the requirements better.

Simplified Explanation:

| TDD | BDD |
| Think of TDD as a way to ensure your code works by writing tests first. It's like setting a goal (the test) and then doing the work (writing the code) to achieve that goal. | BDD takes this a step further by focusing on what the user wants the software to do. It's like having a conversation with the user to understand their needs and then writing tests to make sure those needs are met. |

Why This Matters for You:

Collaboration : BDD enhances collaboration between different teams, which is crucial in your role in software quality assurance.
Clarity in Requirements : By focusing on user behaviour, BDD helps clarify requirements, reducing the chances of building features that don't provide value.
Early Defect Identification : BDD can help identify defects earlier in the testing lifecycle, which aligns with your interest in automation and regression testing.

Gherkin specifications

Structure of Gherkin Files:

Plain Text : Gherkin files are saved as plain text with a .feature file extension.
Line-Oriented : The language uses indentation to define structure, similar to Python or YAML.

Keywords in Gherkin:

Feature : This keyword provides a name and summary of a larger feature of the software.
Scenario : Indicates a single concrete example to test, with specific expectations for system behavior.
Given : Sets up the initial conditions before the scenario unfolds.
When : Describes the action taken on the system by an actor (person or event).
Then : Reflects the expected outcome or result of the scenario.

BDD examples

Example: Here's a simple example of a Gherkin scenario for a login feature:

Feature: User LoginScenario: Successful loginGiven the user is on the login pageWhen the user enters valid credentialsThen the user should be redirected to the dashboard

BDD frameworks

Purpose of BDD Frameworks : BDD frameworks facilitate communication between business stakeholders, developers, and testers by providing a common language for acceptance criteria.

Popular BDD Frameworks :

- Serenity : Automates acceptance tests and provides detailed reports.

Conclusion

Think of BDD like planning a trip. Instead of just focusing on the car (the code), you start by thinking about the destination (what the software should do) and the route (user stories and acceptance criteria). This way, you ensure you're heading in the right direction and meeting the needs of everyone on the trip.

]]>

Enhance Console Logging with a Custom Global Log Wrapper in WebDriverIO

Hardik Chotaliya — Thu, 10 Oct 2024 07:41:21 +0000

Step-by-Step Guide to Creating a Custom Log Wrapper in WebDriverIO

In this guide, well enhance console logging in WebDriverIO by creating a global log wrapper with custom features like color-coding and promise handling. Logging is an essential part of debugging and understanding what your code is doing under the hood. While console.log() works well, enhancing it with custom formatting and color coding can make your logs more readable and informative. In this blog, well walk through how to create a global wrapper around console.log() in your WebDriverIO configuration, adding flexibility and clarity to your log messages.

Why Use a Global Log Wrapper in WebDriverIO?

One of the key challenges in Automation Frameworks is distinguishing your custom log messages from framework or Node.js logs. A simple console output can easily get buried, making it harder to track essential messages. We need a way to make our logs stand out while adding some useful features like skipping empty logs, handling unresolved promises, and color-coding for different log levels.

Step 1: Creating a Simple `log()` Wrapper

The console.log() method is great for outputting information to the console, but we can enhance and shorten it with a custom log() wrapper. Add this snippet at the end of your wdio.conf.ts file:

/** * log wrapper * @param text to be output to the console window */global.log = (text) => { console.log(`---> ${text}`);}

This new global.log() works like console.log(), but with a little extra formatting to help your logs stand out. Lets see it in action:

Before:

console.log('Entering text');

Output:

[0-0] Entering text

After:

await global.log('Entering text');

Output:

[0-0] ---> Entering text

By adding this wrapper, your custom messages are clearly separated from the ones generated by the framework or Node.js.

Step 2: How to Handle Promises and Enhancing the `log()` Function

Lets take this a step further. What if we want to skip empty strings and null values in our logs? Or detect when a Promise is passed to the log? Heres an improved version:

global.log = (text) => { if (text) { // Truthy value check if (text === Promise) { console.log('---> WARN: Log was passed a Promise object'); console.trace(); } else { console.log(`---> ${text}`); } }}

This version gives you more control. It:

Ignores empty and null values.
Warns when a Promise object is passed.
Prints a console trace showing where the unresolved Promise originated.

Step 3: How to Add Color-Coded Logs

To make your logs even more distinguishable, we can add color coding using ANSI escape codes. Heres how:

global.log = (text, level = 'info') => { if (text === undefined || text === null) { console.log('\x1b[33m%s\x1b[0m', '---> No log content (undefined or null)'); // Yellow for empty values return; } let colorCode; switch (level.toLowerCase()) { case 'info': colorCode = '\x1b[32m'; // Green for info break; case 'warn': colorCode = '\x1b[33m'; // Yellow for warnings break; case 'error': colorCode = '\x1b[31m'; // Red for errors break; default: colorCode = '\x1b[37m'; // White for others } if (text instanceof Promise) { console.log('\x1b[33m%s\x1b[0m', '---> WARN: Log was passed a Promise object'); // Yellow warning console.trace(); } else if (typeof text === 'object') { console.log(`${colorCode}%s\x1b[0m`, `---> ${level.toUpperCase()}: ${JSON.stringify(text, null, 2)}`); } else { console.log(`${colorCode}%s\x1b[0m`, `---> ${level.toUpperCase()}: ${text}`); }};

Function Definition

Here's an updated version of global.log function with color codes:

Info logs will be green.
Warn logs will be yellow.
Error logs will be red.

The global.log function is defined globally, meaning it can be accessed from anywhere in the application.

It takes two parameters:

text: The message or object to be logged
level: The severity level of the log (default is 'info')

Handling Different Types of Input:

If the input is undefined or null, it logs a yellow message saying "No log content".
If the input is a Promise, it warns that a Promise was passed and shows a stack trace.
If the input is an object, it's converted to a formatted JSON string.
For other types (like strings), it's logged as-is.

Color Code Explanation:

\x1b[32m: Green color for info logs.
\x1b[33m: Yellow color for warn logs.
\x1b[31m: Red color for error logs.
\x1b[37m: Default white for other log levels.
\x1b[0m: Resets the color back to normal after printing the log.

Output Format:

Each log message starts with "--->" followed by the uppercase log level and then the message.
For objects, it uses JSON.stringify with indentation for better readability.

💡

Check out our guide on setting up WebDriverIO v9 for more details.

https://hardikchotaliya.hashnode.dev/webdriverio-configuration-guide-setting-up-your-test-automation-framework

Example Usage

Now, you can use this function throughout your framework:

global.log('This is an info log'); // Green textglobal.log('This is a warning', 'warn'); // Yellow textglobal.log('This is an error!', 'error'); // Red textglobal.log({ key: 'value' }, 'info'); // Green formatted object

Output:

[0-0] ---> INFO: This is an info log[0-0] ---> WARN: This is a warning[0-0] ---> ERROR: This is an error![0-0] ---> INFO: { "key": "value"}

Conclusion

By creating a custom global.log() function, weve improved how logs are handled in our framework. From adding color-coding to ignoring empty logs, this wrapper makes debugging much easier, while ensuring the frameworks logs are separated from ours.

Have you tried creating your own log wrapper in WebDriverIO? Share your experience in the comments below, and don't forget to subscribe for more WebDriverIO tips and tricks!

Happy logging!

Important Links:

GitHub repositories related to logging ( https://github.com/hardikchotaliya/WebdriverIO-TS-Cucumber-e2e )
Official WebDriverIO documentation ( https://webdriver.io/docs/gettingstarted )

WebdriverIO Configuration Guide: Setting Up Your Test Automation Framework

Hardik Chotaliya — Fri, 04 Oct 2024 09:15:03 +0000

In this blog, we will dive into setting up and configuring WebdriverIO V9, which forms the foundation of your Automation framework.

WebdriverIO Setup:

WebdriverIO can be installed and configured in two main ways:

Custom configuration via the terminal : You answer a series of questions to tailor the setup to your needs.
Cloning a boilerplate project : You can fork a pre-existing project from a repository (like GitHub).

Option 1 : The terminal-based setup asks questions like:

Type of testing : E2E testing (for web/mobile applications) or unit/component testing.
Automation backend : Options include local machine, or cloud services like BrowserStack, Sauce Labs, etc. We are focusing on local setup.
Environment to automate : Typically, web applications (browser-based).
Browser selection : Start with Chrome (you can add others like Firefox, Safari, or Edge later).
Framework : Default options are Mocha or Jasmine. WebdriverIO also supports Cucumber for BDD. (We are Using Cucumber )
Compiler : Use TypeScript (recommended for type safety).

Option 2 : Cloning a Boilerplate Project

Cloning a boilerplate from GitHub (e.g., Jasmine TypeScript Boilerplate) allows you to skip some manual setup and get started faster with a pre-built structure.

Essential Configuration Steps:

Page Object Model (POM): A best practice is to set up the Page Object Model, which organizes locators and actions for each page, making the test code more modular and maintainable.
Reporters : You can use multiple reporters for your test results. For this example, Spec and Allure reporters are configured to generate readable output and detailed reports.
Base URL : Configure a base URL to avoid redundant code for navigation in your tests.
Yarn for package management : The book recommends using Yarn over npm due to its faster package installation. If you are cloning a project, its important to run yarn install to bring in all dependencies.

Test Files and Directory Structure:

Test files follow this structure: ./test/specs/**/*.ts (organized in folders for better scalability).
Page objects should be stored in ./test/pageobjects/**/*.ts.

Running the Tests:

After configuration, you can run your tests using:

yarn wdio for executing all tests.
npx wdio run test/wdio.conf.ts for more direct execution.

The command wdio run will launch the test suite and display results in the terminal using the chosen reporters.

Managing Dependencies and Commits:

Use yarn outdated to check for outdated dependencies.
Use yarn upgrade-interactive to update individual packages.
Add a .gitignore file to avoid committing unnecessary files (e.g., node_modules, test results) to your repository.

Version control tip : Create branches for new features to work on without affecting the main branch. When finished, create a pull request (PR) to merge the changes back into the main branch.

Deeper Concept: Page Object Model (POM)

The Page Object Model separates test logic from the details of the web UI. Each page of the web app is represented by a class. This class contains:

Locators : Find elements on the page.
Actions : Perform tasks like clicking buttons or entering text.

For example, a LoginPage object might look like this:

class LoginPage { get usernameInput() { return $('#username'); } get passwordInput() { return $('#password'); } get loginButton() { return $('#login-button'); } async login(username: string, password: string) { await this.usernameInput.setValue(username); await this.passwordInput.setValue(password); await this.loginButton.click(); }}export default new LoginPage();

Why is POM important?

Modularity : When the UI changes, you only need to update the page object instead of multiple tests.
Reusability : Actions can be reused across different test cases, reducing code duplication.

Yarn vs. npm

Yarn installs packages in parallel, speeding up the process compared to npms sequential installations.
It generates a yarn.lock file to ensure consistent dependencies across environments, much like package-lock.json in npm, but with better performance management.

Example: First WebdriverIO Test

A simple test setup created by the configuration wizard could look like this:

import { browser, $ } from '@wdio/globals';describe('Sample Test', () => { it('should load a website and check the title', async () => { await browser.url('https://duckduckgo.com/'); await $('#search_form_input_homepage').setValue('WebdriverIO'); await $('#search_button_homepage').click(); const title = await browser.getTitle(); expect(title).toContain('WebdriverIO'); });});

Next Steps:

Install WebdriverIO : Follow the configuration steps in the book to set up the project, using Yarn to manage dependencies.
Run basic tests : Start with simple E2E tests like the one shown above to familiarize yourself with WebdriverIO.
Explore configurations : Modify reporters, services, or browser setups as per your project needs.
Use POM : Structure your tests with Page Object Models to ensure scalability and maintainability.

]]>

🗃️ The Ultimate Toolset for Becoming a Top 1% SDET 🧰

Hardik Chotaliya — Thu, 03 Oct 2024 07:05:24 +0000

Are you new to Software Development Engineering in Test (SDET) and eager to write your first test code? Starting with a well-planned setup is key to building a stable, scalable, and maintainable testing framework. Ive done that myself, only to realize later there were some tools I missed that could have helped to make my journey easier from the start. That is why we will see the system specifications, tools, and configurations that will help us to write better code from day one.

In this post, I'll share the essential tools and configurations needed to begin developing a robust Test Automation Framework. These are designed to help you write more tests, debug more efficiently, and produce a testing framework that will be stable, scalable, and require far less code maintenance.

The main topics covered:

Machine Setup (Windows or MAC)
Installing Visual Studio Code IDE
Getting a GitHub account for code Version Control
Writing better code with Prettier, ESLint, and GitLens VS Code Extension
Installing Browser Extensions

Why to Start with Tools?

As a beginner, you might be tempted to jump straight into writing your first test script. However, starting with the right tools and setup will save your time and headaches down the road. This blog will discuss the essential tools that every SDET should have in their Skill set.

Machine Setup

Before you can do anything in the world of test automation on a machine, you must install some packages. You need admin rights and should install essential packages like:

NodeJS (Latest Stable Version)
Yarn (Preferred over npm due to its speed in parallel installations)
Java JDK
Visual Studio Code (VSCode) or other IDEs like IntelliJ
Git

💡

Tip: Matching the resources (CPU, RAM) and access levels (local admin rights) of your dev team is crucial for success.

Note for Windows Users:

Set up the PATH environment for your node

Reboot the machine for all the changes to take effect

Before we get to running our first test, we need to check out system requirements and get our tools. were going to cover how to install and configure tools that will make our job easier, as follows:

Hardware specifications
Node.js
A GitHub account and GitHub Desktop for code change management
Microsoft Visual Studio Code
Prettier , GitLens , and ESLint extensions
The SelectorsHub and EditThisCookie Chrome extensions

Hardware specifications

What are the technical spec requirements for my WebdriverIO test automation system?

Note - Do not use the minimum requirements listed anywhere on the internet. Whatever it is, it is too small.

Do match the CPU speed, the amount of RAM, the drive space, and the number of monitors on desks.

CPU: Aim for a modern multi-core processor. The faster, the better.

RAM: Minimum 8 GB; 16 GB is recommended.

Storage: At least 50 GB of free space, preferably on an SSD for faster performance.

Monitors: Multiple monitors will significantly improve productivity, especially when debugging.

Installing Node.js and npm

Node.js is a tool used to run web applications outside of a web browser. This project was created using Node version v16.13.0 for several reasons. Earlier versions only supported synchronous mode, which was deprecated in WebDriverIO 9.0 and removed in version 8.0. Although the latest version of Node is v22, it is recommended to use v20 as it is the most compatible with other modules and packages.

Lets begin by installing Node and npm. The following screenshot shows how you can do this:

Figure 1.1 Downloading Node.js from https://nodejs.org/en/

The version of Node.js to install will be long-term support ( LTS ), which is version 20.16.0 as of this writing.

For both Mac and Windows, we will install a version of Node that is at least version 18.0. From the command shell, type these two commands:

> nvm install 20Downloading node.js version 20.16.0 (64-bit)...> nvm use 20Now using node v20.16.0 (64-bit)

While this completes the Node installation, we need to take note of alternative package managers that offer additional options.

Alternate node package managers Yarn versus npm

While npm is the default node package manager provided, we recommend using Yarn to both install packages and run programs. One major advantage of Yarn is that it installs packages in parallel. This reduces the build time significantly when initializing or refreshing the package.json file.

Again, from the command shell type the following:

> npm install --global yarn

After installing Yarn, you can verify the installation by running the following command:

> yarn --version1.22.21

Configuring the coding environment with GitHub

In the upcoming blogs, we will dive deeper into Git and GitHub for code versioning. But it is good to plan, so we will create a Git folder structure for our projects.

Our wdiov9 project workspace will live in a Git repository ( repo ) folder that holds your projects, Lets begin by creating a \repos folder at the root of our drive, or on the desktop on Mac, to hold our projects:

Figure 1.2 Sample repository and project directory structure

Our project will be stored inside a local repository named "wdiov9" folder. This is where we will create a place where our files will be stored. This folder will store our files. Later, we will use code repositories like GitHub, GitLab, and Bitbucket for version control.

Create a GitHub account

Go to https://github.com/ and click Sign up. Enter an email, a password, and a username, and verify your account.

Figure 1.3 Github Signup page from https://github.com/signup

Or if you already have a Github account then Sign-In,

Figure 1.4 Github SignIn Page https://github.com/login

We now have a free public GitHub account for practising commits and version control. Please go to your GitHub page and create a "wdiov9" repository with a README file.

Steps to Create a Repository on Github:-

Login on Github
Go to Repository
Click on New Button
Now fill in the Repository Name for Example "wdiov9" in our case.

Figure 1.5 Github Repository creation
Click on Create repository

Here we have successfully created the git repository.

Figure 1.6 Github Created Repository

Installing Visual Studio Code

Download Visual Studio Code from https://code.visualstudio.com/download.

Figure 1.7 Visual Studio Code download

Now that Visual Studio has been installed, we can check that Node and npm have been installed from the embedded Terminal shell window.

Figure 1.8 Visual Studio code installed and Open

💡

Technical insight: ESLint and Prettier help enforce best practices, and GitLens gives you a quick historical view of code, which makes debugging efficient when multiple contributors are involved.

Installing Visual Studio Code add-ons Prettier

From the Extensions icon, add the Prettier Code formatter extension:

Figure 1.9 Prettier Extension

Prettier will automatically format code without the need to manually type tabs. In this example, the unformatted code on the left can be formatted by right-clicking and selecting Format Document.

Figure 1.10 Prettier Extension application

Installing Visual Studio Code add-ons GitLens

Among other features, the GitLens extension displays the latest code changes in our GitHub repository. To add the GitLens extension , go to Extensions.

Figure 1.11 GitLens Extension

Clicking on any line of any tracked document in the project activates GitLens :

Figure 1.12 GitLens Extension application

Installing Visual Studio Code add-ons ESLint

ES stands for ECMAScript , which is the code standard for JavaScript that is intended to ensure the interoperability of web pages across different browsers.

From Extensions , add the ESLint extension:

Figure 1.13 ESLint Extension

ESLint identifies and reports code patterns in TypeScript projects to promote consistency and prevent bugs. View it in action in the screenshot below.

Figure 1.14 ESLint Extension application

Now that we have configured Visual Studio Code, lets add some tools to our browser for selecting elements and managing cookies.

Installing Chrome extensions

Our next two tools are the easiest to install.

SelectorsHub - which allows us to create robust locators of elements in Chrome, Edge, and any Chromium-based browsers.
Cookie-Editor - which allows us to clear the cookie cache from the browser frontend.

💡

Pro Tip: Use these extensions to simplify tasks like building and validating XPath or CSS locators and handling cookies without additional code complexity.

Summary

In this blog, we have focused on the essential tools and configurations required to develop a robust Test Automation Framework with an Example of WebDriverIO with Typescript. This blog is tailored to help both beginners and experienced testers to set up a stable and scalable testing environment.

In the next Blog, we will install WebdriverIO v9 and begin to explore the folder structure of the WebdriverIO TypeScript framework project.

]]>

🚀 What’s New in WebdriverIO v9: Key Features & Updates for 2024

Hardik Chotaliya — Thu, 15 Aug 2024 18:18:34 +0000

Introduction

On August 16, 2024, WebdriverIO announced the release of version 9, marking an exciting advancement for this test automation framework. Building on the improvements made in versions 6, 7, and 8, the WebdriverIO team revamped the framework in TypeScript, transitioned from CommonJS to ESM, removed sync support in favour of async-only, and introduced integration for Google Lighthouse. This version 9 release represents a significant refinement of the framework. It is expected to bring major changes for end users but won't introduce compatibility issues.

Whats new in WebdriverIO version 9 :

Automatically enabled WebDriver Bidi for supported sessions enabling features like request mocking across Chrome, Firefox, and Edge
Added support for automatic piercing of Web Components
Implemented native fetch
Removed support for old JSONWireProtocol and deprecated interfaces
Renamed @wdio/devtools-service to @wdio/lighthouse-service
Consolidating Lighthouse-related commands
Removed devtools features in favour of Puppeteer and the getPuppeteer command
Faster tests due to the new TypeScript runtime environment

Lets explore the WebdriverIO v9 updates.

Key Features of WebdriverIO v9

WebDriver Bidi Integration

WebdriverIO v9 has introduced automatic support for the WebDriver Bidi protocol in supported browser sessions. This is a game-changer for developers and testers, as it allows seamless request and response mocking across major browsers like Chrome, Firefox, and Edge. Previously, handling network requests required additional libraries or workarounds, but with WebDriver Bidi, you can intercept, modify, and test network traffic directly within your tests. This simplifies tasks like testing API responses, simulating different network conditions, and verifying how your application handles various scenarios without needing external tools.

👉 To read more about WebDriver BiDi - The future of cross-browser automation, please check this blog. 👇👇👇

https://hardikchotaliya.hashnode.dev/webdriver-bidi-browser-automation-protocol-guide

Automatic Piercing of Web Components

One of the most awaited features in WebdriverIO v9 is the automatic piercing of Web Components. Web Components, a suite of different technologies allowing developers to create reusable custom elements, have been notoriously challenging to work with in testing environments. With this update, WebdriverIO can now automatically interact with shadow DOM elements without requiring complex code. This makes testing modern web applications that heavily rely on Web Components much easier and more intuitive, ensuring that your tests can keep pace with the latest development trends.

Native `fetch` Implementation

In line with modern JavaScript standards, WebdriverIO v9 has introduced native fetch support. This allows developers to make HTTP requests within their test scripts using the familiar fetch API, rather than relying on third-party libraries like axios or request. Native fetch support simplifies test code and aligns it more closely with production code, making it easier to write, maintain, and debug. It also reduces the dependency on external libraries, leading to a more streamlined and efficient testing environment.

Deprecation of JSONWireProtocol and Deprecated Interfaces

WebdriverIO v9 marks the end of support for the old JSONWireProtocol and several deprecated interfaces. The framework has fully embraced the W3C WebDriver standard, ensuring better compatibility and performance across all browsers. By removing these legacy protocols, WebdriverIO is able to offer a more stable and consistent experience, reducing the chances of running into issues with browser compatibility or outdated implementations. For users, this means fewer headaches and a more reliable testing process.

Renaming of @wdio/devtools-service to @wdio/lighthouse-service

In an effort to better reflect its functionality, WebdriverIO has renamed the @wdio/devtools-service package to @wdio/lighthouse-service. This change highlights the enhanced integration with Google Lighthouse, a tool used to analyze web page performance, accessibility, SEO, and more. The renamed service now consolidates all Lighthouse-related commands, making it easier for users to run performance audits as part of their automated test suites. This update underscores WebdriverIOs commitment to providing comprehensive testing solutions that go beyond functional testing, enabling developers to monitor and optimize their applications holistically.

Removal of DevTools Features in Favor of Puppeteer

With WebdriverIO v9, the framework has removed certain DevTools features, opting instead for enhanced Puppeteer integration via the getPuppeteer command. Puppeteer, a popular headless browser automation tool, offers a more robust and flexible API for interacting with browser DevTools. By focusing on Puppeteer, WebdriverIO ensures that users have access to the latest and most powerful browser automation capabilities, particularly for tasks like headless testing, capturing screenshots, and generating PDFs. This shift also aligns with the industry trend towards using Puppeteer for complex browser interactions, providing users with a modern and well-supported toolset.

Faster Tests with new TypeScript Runtime Environment in WebdriverIO v9

Finally, one of the most significant under-the-hood changes in WebdriverIO v9 is the move to a new TypeScript runtime environment. This update not only modernizes the framework but also results in noticeably faster test execution. TypeScripts static typing and enhanced editor support lead to fewer runtime errors and more efficient test code, which in turn speeds up the entire testing process. For developers, this means shorter feedback loops and the ability to iterate more quickly, ultimately improving productivity and code quality.

Advantages of WebdriverIO v9 over v8

Here's a simplified table comparing the key differences between WebdriverIO v8 and WebdriverIO v9:

| Feature/Aspect | WebdriverIO v8 | WebdriverIO v9 |
| New Features | DevTools protocol, ES6 module support, automatic waits, retry mechanism | Component Testing, test parallelization, enhanced TypeScript support, WebdriverIO Assistant |
| Deprecations/Breaking Changes | Removed synchronous commands, Node.js below v12 deprecated | Further streamlined commands, Node.js below v14 deprecated |
| Ecosystem & Plugins | Expanded plugin ecosystem, cloud service integration | New plugin architecture, improved CI/CD support |
| Configuration & Setup | Simplified wdio.conf.js, support for .env files | WebdriverIO Assistant, enhanced CI/CD integration |
| Documentation & Support | Improved guides and community forum | More in-depth guides, video tutorials, expanded community support |
| Cross Browser Request Mocking | WebdriverIO introduced request mocking in v6.3.0, limited to Chromium browsers | Due to use of WebDriver Bidi, Extending support to all browsers |
| Automatic Shadow Root Piercing | supported "deep selectors", this functionality was limited to CSS selectors | WebdriverIO is the first framework to support this capability for shadow roots in both open and closed mode. |
| Setting Viewports | With WebDriver Classic, this can be challenging because browser windows cannot scale down to very small sizes and often maintain a minimum width of 500px. | v9 introduces a new "setViewport" command for precise mobile emulation, Adjust viewport size, device pixel ratio, and user agent easily in one command with the new "device" emulation scope, enhancing your responsive testing |
| Automatic Dialog Handling | With the WebdriverIO v8 version, all commands will fail if you don't handle them properly. | With WebdriverIO v9 we will start automatically suppressing dialogs, unless you explicitly register a listener to it |

This table provides a concise overview of the major changes between the two versions.

My thoughts on the version update

WebdriverIO v9 is a significant step forward, building on the continuous efforts of the team to create a more robust and well-rounded testing framework. Im particularly excited about the new features, especially the opportunity to explore Webdriver Bidi with WebdriverIO.

What I appreciate most is that this update doesnt introduce many breaking changes, making the upgrade from version 8 to 9 seamless. This allows developers to take advantage of the new enhancements without the headache of compatibility issues. I highly recommend updating your projects to the latest version to benefit from these improvements.

💡

How to upgrade to WebdriverIO v9 from WebdriverIO v8 [The blog is coming till 26 Aug 2024]

If youre interested in delving deeper into WebdriverIO, check out my blog post on Starting with WebdriverIO v9 [Coming Soon]. Additionally, feel free to explore this GitHub repository where Ive shared a sample example using WebdriverIO v9.

Conclusion

WebdriverIO v9 represents a major step forward for the framework, bringing with it a host of new features and improvements that enhance the testing experience. From better browser protocol support to modern JavaScript features, WebdriverIO continues to evolve, making it an indispensable tool for developers and testers alike. By staying up to date with the latest changes and understanding how to leverage these new capabilities, you can ensure that your test automation is both effective and future-proof.

Important Links you can refer to:

WebdriverIO v9 Released | WebdriverIO

WebdriverIO v9 Release Party: Browser Automation's Future

[Tracker] WebdriverIO v9 Release

]]>

⏳ WebDriver BiDi: Revolutionizing Browser Automation Protocols for Modern Testing

Hardik Chotaliya — Thu, 15 Aug 2024 07:15:26 +0000

History of Protocols in Automation

We have two sets of automation controls here:

One is based on the WebDriver protocol

And the other is running the tests within the browser.

These two can be categorized as Low-level and High-level implementations* :*

Based on the WebDriver protocol ( Low-level implementations )
Running the tests within the browser ( High-level implementations ).

Low-Level Implementations

WebDriver Classic

In the WebDriver classic system, a client represents the automation framework (e.g., Selenium WebDriver, Webdriver IO, Nightwatch js) and browser drivers developed by Vendors. These drivers communicate with browser binaries via HTTP JSON protocol to execute actions like click, send keys, hover, etc. Each action is an API call to the browser binary, which then performs the action and responds to the client.

Sends commands : Tells the browser what to do (click, type, etc.) using simple commands.
Multi-browser support : Works with many different browsers.
Slowdown : Can be slow because it needs to constantly send new commands.
Limited : Can't directly access things like network activity.

CDP (Chrome DevTools Protocol)

The Chrome DevTools Protocol (CDP) is primarily for developers and aids in debugging. It enables access to the browser DevTools. Google introduced Puppeteer, an automation tool that utilizes CDP to interact with browsers.

Deep control : Lets you see and change almost anything in a Chrome browser, like network traffic, console messages, and device settings.
Fast and flexible : Uses a direct connection to the browser, so it's quick and can respond to changes instantly.
Limited to Chrome : Only works with Chrome-based browsers.
Changing rules : The way to use it can change as Chrome updates.

High-Level Implementations

Native Scripting (Web APIs & Node.js)

Cypress-based implementations fall into this category. In this approach, the automation tool utilizes Web API and injects JavaScript directly into the browser to execute the tests. As a result, the automation tool operates within the constraints established by the JavaScript code sandbox.

Fast and in control : Runs tests quickly inside the browser.
Limited actions : Can't fully mimic real user behaviour, mostly works by changing the page's code.
Security restrictions : Can't do everything, like opening new tabs or windows, because the browser limits what it can do.

So, now we have discussed three approaches: one is based on JavaScript, where JavaScript is injected, but we do not want to pursue that direction as its entirely high-level and represents a different model altogether. Now, within low-level implementations, we have certain advantages and disadvantages with each of the tools. So, what if there exists a solution where the best of both worlds are brought together? For example, Real User Emulation, W3C standard compliance, Multi-browser support, Event-Driven architecture, and Bi-Directional communication. Thats where the solution comes in the form of WebDriver BiDi.* *

What is WebDriver BiDi?

WebDriver BiDi (Bidirectional) is a significant evolution in the world of test automation. Unlike traditional WebDriver, which primarily allows communication from test scripts to the browser, WebDriver BiDi introduces bidirectional communication. This allows real-time data exchange between your test scripts and the browser.

Imagine youre controlling a robot. Traditional WebDriver is like telling the robot what to do, but you cant hear its replies. WebDriver BiDi is differentit lets the robot talk back to you! This makes it easier to see whats happening in real-time.

Work on WebDriver BiDi was started in 2020 by the W3C Browser Testing and Tools working group This work is a collaboration: Webdriver BiDi working group comprises browser vendors (chrome, firefox, safari), open-source browser automation projects (selenium, webdriverIO), and companies offering browser automation solutions (Browser Stack, Sauce labs).

All these stakeholders work together in harmony to bring a simple and unified solution for the testers that is easy to implement.

Why Do We Need WebDriver BiDi?

1. Listening to DOM Events

What It Does : WebDriver BiDi can listen to events happening in the DOM (Document Object Model) of a webpage, like clicks, inputs, or any changes.

Why It Matters : This allows tests to react immediately when something happens on the page, making automation smarter and more efficient.

2. Capturing & Sending JavaScript Errors

What It Does : If theres a JavaScript error on a webpage, WebDriver BiDi can catch it and send it back to the test script.

Why It Matters : This helps in identifying issues in real-time, so you can fix them quickly.

3. Reading Console Messages

What It Does : WebDriver BiDi can read messages that are logged in the browsers console (like warnings, errors, or logs).

Why It Matters : This gives insights into whats happening behind the scenes in the browser, helping you understand any issues or behavior in your web app.

4. Recording or Manipulating Network Traffic

What It Does : It can monitor and even change the network requests and responses happening between the browser and the server.

Why It Matters : This is useful for testing how your app behaves under different network conditions, like slow connections or specific server responses.

5. Real-Time Communication and Control Over Browser Internals

What It Does : WebDriver BiDi allows two-way communication with the browser, meaning it can send and receive data instantly.

Why It Matters : This real-time interaction enables more dynamic and responsive tests, making it easier to handle complex scenarios like animations or dynamic content.

These features make WebDriver BiDi a powerful tool for modern browser automation, giving you greater control and insights into how your web applications work.

Conclusion

In conclusion, WebDriver BiDi is a game-changer for automation, as it leverages the benefits of Bi-Directional Communication, Event-Driven architecture, Multi-browser support, and access to low-level controls such as Console and Network. It also adheres to the W3C standard. Let's start adopting these new features as they're released and experience the benefits firsthand.

WebdriverIO v9 & Selenium have integrated this future of protocols into their tools.

To read more, please check this blog.

💡

Upcoming Soon...

]]>

🖼️ Comprehensive Guide to Image Testing & Optimization for E-commerce Websites

Hardik Chotaliya — Sun, 21 Jul 2024 12:15:56 +0000

Image Testing for E-commerce

Introduction of Image Testing for E-commerce

Image Testing for E-commerce plays an important role in E-commerce website testing. They enhance the visual appeal and aid in product representation, helping customers make informed purchasing decisions. In this blog post, we'll delve into the types of images supported on the web, their features, applications, and best practices for testing these images to ensure optimal performance and user experience.

Figure 1.1 Image Testing for E-commerce Website

Types of Images Supported on the Web

The following table summarizes the common image types supported by web browsers:

Choosing the Right Image Type

Each image type has its own unique features and use cases:

APNG & PNG :
JPEG :
GIF :
SVG :
TIFF:
BMP
ICO
WebP

Image Testing for E-commerce Website

To ensure your e-commerce website promises a seamless personal experience, its crucial to check photos very well. Heres a checklist to manual you via the system:

File Size and Load Time :
Image Quality :
Responsive Design :
Accessibility :
SEO :
Cross-Browser Compatibility :
Performance Impact :

Best Practices for E-commerce Images

Optimize Image Sizes: Use compressed formats like JPEG and WebP to reduce load times without sacrificing quality. Ensure product images are optimized for various screen sizes and resolutions.
Responsive Images: Implement responsive images using the srcset attribute to serve different image sizes based on the users device. This improves performance and user experience on mobile devices.
Lazy Loading: Utilize lazy loading techniques to defer loading images until they are in the viewport. This helps in improving initial page load times and overall site performance.
Accessibility: Ensure all images have descriptive alt attributes for better accessibility and SEO. This helps screen readers and improves search engine understanding of the image content.
Consistent Image Quality: Maintain a consistent quality and style for product images. High-quality, clear images can significantly impact purchase decisions.
Use Appropriate Formats: Choose the right image format for the context. For example, use PNG for images requiring transparency, JPEG for photographs, SVG for logos and icons, and GIFs for simple animations.
Content Delivery Networks (CDNs): Utilize CDNs to deliver images quickly to users regardless of their geographic location. This reduces latency and improves load times.

Conclusion

By following these hints for Image Testing for E commerce, you can ensure that the images on your e-commerce website are optimized for both performance and user experience, driving better engagement and conversions.

Feel free to share your thoughts and any additional tips or Hints you might have in the comments below!

]]>