Forem: codepoetn

Skeptical about "AI coding agents?" Here's how you save 10-30 hours of your dev time by implementing enterprise SSO in 10 minutes using Claude Code Scalekit Auth Stack Plugins.

codepoetn — Tue, 24 Mar 2026 04:23:56 +0000

Saif for Scalekit Inc

Mar 24

Add Enterprise SSO to Your Next.js App in Minutes Using Claude Code & Scalekit

#sso #claudecode #nextjs #fullstack

Comments

9 min read

Optimised Google SecOps - Thwart Cyber Threats In Style

codepoetn — Thu, 05 Feb 2026 18:41:18 +0000

Taking cognizance of the costs of cyberattacks, enterprises increased their annual IT security budget by 5.7 percent. If you’re heading security at your org, you would know how hard it is to get the budgets approved by any CFO. Anyway, it’s probably ‘the good times’ for security professionals; finally, cybersecurity is getting its fair share of attention.

What’s fuelling this attention? The cost of not paying attention.

Who wouldn’t be extra cautious knowing that the cost of cybercrimes will surpass 15.63 trillion by 2029?

You read that right. 15.63 Trillion!!!

If you don’t plan to contribute to that number, you better amplify your cybersecurity arsenal. Shh, I’m letting you in on a secret…enterprise CIO & CISO leaders often turn to Google SecOps (formerly known as ‘Chronicle’) to streamline their security operations.

“Why Google SecOps,” you ask.

Well, an IDC study revealed that Google SecOps clients command as much as $13.50 million in additional revenue per year on average.

That spike is (in)directly attributed to SecOps because it gives organizations secure innovative muscles.

Ah, by the way, Google SecOps is not the only tool where the money is flowing. When we earlier mentioned a 5.7% spike in annual security budgets, did you wonder where that extra fund for cybersecurity would go? Where your peer CIOs & CISOs are investing? A short answer would be, everything that bolsters enterprise security; both established and emerging security areas are under the radar; To be precise, Security Information and Event Management (SIEM) & Security Orchestration, Automation, and Response (SOAR) tools.

More specifically, for 60% of enterprises Cloud Security is a top priority, followed by Data Security (59%), Identity Threat Detection & Response (47%), Infrastructure Protection (36%), and Automated Security Control Assessment (37%) as other critical fronts where security investments are being channelized. SOC teams are betting big on tools like Splunk, Microsoft Sentinel, and Google SecOps.

Read this insight, written by Nishant Choudhary, to the very end to understand how optimizing Google SecOps can help you flex your organizational innovation muscles. SecOps does the heavy-lifting and handles majority of your security concerns in a cost-effective manner.

Meet Nishant, the tech writer

Let’s start with a primer on Google SecOps.

What’s Google SecOps? — A short primer for beginners.

Google SecOps, at the core, is a Gen-AI-led SIEM & SOAR platform, aka cloud service that lets you proactively collect, aggregate, normalize, correlate/analyze, auto-detect, investigate, and respond to security telemetry data i.e., logs, events, and incidents.

Google SecOps platform provides customers with a suite of security tools and features that are either natively built into the platform or can be integrated to extend the platform’s capabilities.

For example,

To ingest log data, you have inbuilt Google’s SecOps SIEM which will collect raw data from forwarders, or you can use 3rd party connectors and webhooks.
To normalize the data streamed/forwarded to your SIEM tool in order to analyze it, you get a set of 800+ parsers accessible at your fingertips.

Small, big, and many Fortune 500 companies rely on Google SecOps for a unified view of their SIEM, SOAR, and threat intelligence data. Some of the notable names in their clientele include Etsy, Groupon, and Pfizer.

One of the main reasons why enterprises are flocking to Google SecOps is its pricing model and log data storage capability. In a report, clients cited an average increase of 283% in data ingestion capabilities when they switched to Google SecOps compared to their last SIEM vendor platform.

Obviously, the economy of scale positions Google SecOps to gain a pricing edge over comparatively smaller players. Hence, depending on your use cases and the scale of security operations, you might be able to save a lot by making the switch to Google SecOps.

Wait, there is more to it.

Wouldn’t your eyes sparkle if we told you that you could save way more by optimizing your Google SecOps platform?

Yeah, that’s possible. You can further slash your SIEM costs.

“How?” you ask.

Well, first let’s get ourselves brushed up with prominent Google SecOps features and components so that we can explain on a high level how you may save more while improving your security posture by optimizing Google SecOps.

Dismantling Google SecOps Platform — One part at a time.

As mentioned earlier, Google SecOps provides your SOC team with the tools for SIEM & SOAR. Holistically speaking, they help you with the following capabilities-

Data Ingestion/Collection, Parsing, and Enrichment

Data can be ingested using-

Linux & Windows Forwarders, which can be installed on the client’s end.
BindPlane agent, which can be managed using the BindPlane OP Management console.
Google Security Operations SIEM ingestion service’s APIs.
Data Feeds from static cloud storage like AWS S3, or 3rd party APIs like Okta.
Google Cloud Account, of course.

You can input both-

Raw/processed log data from your network devices, servers, or security software or devices installed on-premise, cloud-based solutions, or
Alerts from other SIEM solutions, EDRs, or Ticketing systems using SecOps’ SOAR connectors and Webhooks.

Any ingested data needs to be formatted as a Unified Data Model (UDM) structure, which is nothing but a standard structured schema that Google SecOps uses to store security data. This helps build semantic consistency when the influx of data is in varied formats from varied sources. And with the UDM approach, it’s easier to write platform-agnostic security rules.

But how do you format the raw data as UDM?

That’s where parsers come in.

You can use pre-built parsers if your log type source is available in Google SecOps’ pool of 800+ parsers, or you can use your own custom parsers.

Lastly, once your UDM data is ready, Google Security Operation services enrich your data from various sources by adding contextual data about artifacts using-

Entity graph and merging
Safe Browsing threat list
Geolocation data
WHOIS data
VirusTotal data
Google Cloud Threat Intelligence (GCTI) data

Threat Detection

When your security data is ready to be consumed by Google Security Operations’ downstream systems, you can use YARA-L language to configure Rules to trigger alerts for threat detection, and use Google SecOps innate ability to correlate vast number of suspicious security Indicators of Compromise (IOC).

Google provides a very rich set of rules-related features to put you in control of how proactively you want to deal with security threats— from Rules Dashboard for viewing rules and their previous versions to rules editor for managing rules, configuring their run frequency, archiving them, dealing with rule detection limits, and performing context-aware risk scoring and severity analytics; you get everything needed for ‘threat detection’ off-the-shelf.

Threat Investigation & Intelligence

What happens after alerts get triggered or your set rule-based events/incidents are detected? Maybe, you can respond, or you can investigate further. The good news is that Google SecOps gets it. They provide tools to perform forensics-grade investigation on your raw log data, UDM data, or context-enriched data. You can use timestamps, regular expressions, boolean operators, and various filters available for the involved entities under different investigative views— user, asset, IP address, Files, and Hash views. Each of these views has enormous data to perform root cause analysis of security incidents.

Nevertheless, as an extra layer of security, Google SecOps Applied Threat Intelligence (ATI) helps you discover any occurrence of IOC matches that are curated by Mandiant threat intelligence. At the core, these too are alerts contextualized by Yara-L using Curated Detection.

Threat Response

Lastly, all the detection and investigation pave the way for threat prevention or mitigation by safeguarding your enterprise security fencing, aka defense system. The threat response is mainly about playbooks— triggers, actions, and flows.

Triggers are a way of activating a playbook based on threat detection & investigative insights.
Actions are a set of tasks that need to be completed in response to the threat.
Flow defines how a set action gets implemented. You can even use remote agents and custom code and integrations to create a robust threat response system. For example, you can use Google Security Operations’ Agent to execute private actions on your remote site in response to an incident.

Gemini Stitched Right Into The Google SecOps Fabric

Gemini comes integrated into your Google SecOps platform. You can use it to generate UDM search queries, write custom YARA-L rules for threat detection, use it as your threat analytics research partner, create playbooks, or just understand Alerts and the Actions that can be performed to mitigate the threats.

Follow Nishant (author of the post) on LinkedIn

Reimagining Your Enterprise Security by Optimizing Google Security Operations

All this is cool, and now it’s time for the crux of this blog. Google SecOps is all great, but can you further optimize it for cost efficiency while squeezing everything that it has to offer? Yup, you can.

Inflating Data Orchestration Costs

IT Telemetry data storage and forwarding volume is a major cost factor in SIEM & SOAR tools. Disparate IT systems within an enterprise (including Cloud & on-premise) generate tons of data, then be it from EDR consoles, firewall logs, vulnerability scans, employee activity, or IAM tools. Terabytes of data get generated on a daily basis depending on your organization’s scale. But not all of this data is security critical. Some of it is sheer noise. Calling it ‘junk’ won’t hurt anyone’s sentiments. Forwarding, processing, or storing this data in raw or UDM format is just a waste of your resources. These leakages can quickly inflate to jaw-dropping costs, often north of 6,7 figures.

You may fix such leakages in the following ways:

1. Extended Set of Parsers Solve The Data Usability Challenges

There are platforms that help you with telemetry data orchestration. They provide managed Google SecOps services. You may even find vendors who provide pre-built connectors and integrations to complement Google’s 800+ connectors. This saves you enough time and money that you would have alternatively invested in designing parsers for normalizing raw log data into UDM format from all your edge nodes.

2. Relevance-based Data Orchestration Solves The Volume Challenge

The influx of AI-powered security solutions can help you significantly reduce data ingestion volumes. Obviously, not all the data would make sense. Some are less critical, some are sensitive data. Context-aware volume reduction solution would ensure that only security-value-worthy data gets forwarded to Google SecOps, and the less critical data gets filtered or pushed to cheaper storage alternatives, maybe even dumped on-premise in your own data lake. More relevant data translates into faster attack/anomaly detection and prepares the ground for proactive response/remediation.

3. System-aware and Context-aware Security Data Enrichment & Intelligence

Managed SIEM solutions not only separate the less critical data to improve the data usability and insights quality but also enrich UDM-modeled data. This facilitates SOC teams later to effectively leverage Google SecOps search capabilities to deeply investigate the events, and subsequently configure comprehensive response triggers to filter out less critical events and channel the team’s effort towards those incidents that impact the business bottom line. This translates to enhanced talent productivity, faster threat mitigation, faster shipping of new features to the market, and ultimately more revenue while optimizing your Cybersecurity budget utilization.

4. Enhances Interoperability Among Your Entire SOC Stack

Another good perk of weaving your security fabric with a managed SIEM solution is the flexibility and freedom it provides to your SOC team. Today, most of the companies have an evolving infrastructure. The bigger it grows in size, the lesser the freedom to experiment with new platforms.

Often, you get pigeonholed into doing the best you can with your existing vendors because the cost of switching overcasts the benefits of switching.

But not anymore with managed SIEM solutions; your SOC team will not find themselves in vendor lock-in situations.

You can anytime make the switch to any platform that best serves your goals- then be it Microsoft Sentinel Google SecOps or any other platform.

Ready to leap into futuristic and proactive security?

Keep rocking!

Adding Firefox Extensions With Selenium In Python

codepoetn — Mon, 26 Jul 2021 06:59:26 +0000

Modern browsers are equipped with all sorts of functionalities, i.e., from bookmarks to GPS location tracking, developer tools, and more. Almost all the modern web browsers have immense capabilities – Firefox has inbuilt screenshot capabilities, Opera has a free VPN, and Edge comes with in-built support for displaying ebooks with EPUB extension. Though browsers like Firefox, Chrome, and others are majorly used for web browsing, the fact is that Add Ons (or extensions) in Firefox provide additional power to the web browser! The same rule of thumb is also applicable to other browsers like Chrome, Edge, etc.

Additional add-ons, plugins, extensions are required to extend or customize browser functionalities, boost productivity, and suit specific requirements of users and developers. Test automation engineers that use Selenium test automation can also benefit from browser extensions like normal end-users. In fact, testers often need to automate the testing of these extensions itself 🙂

The catch is that the extensions installed on the Firefox browser present on the local machine will not be available when you fire up a Firefox instance using Gecko Driver and Selenium WebDriver. In this part of the Selenium Python tutorial, we deep dive into adding extensions in Firefox using Selenium WebDriver and Python.

What is Firefox WebExtensions API?

In Sept 2015, Mozilla started signing and validating every extension to ensure that the third-party extensions enable Firefox customization without sacrificing security or exposing users vulnerable to malware. Mozilla deprecated XPCOM and XUL-based add-ons and adapted a new extensions API (i.e., WebExtensions API).

New extensions API is compatible with the model used by Opera, Chrome, and other latest browsers. Thus, a Firefox extension developer can easily develop and manage cross-browser extensions.

What is XPI?

XPI is a cross-platform installer module file. It’s the same as zip files and can be accessed using any archive/compression program. XPI installation files are in use by Firefox, SeaMonkey, and Thunderbird. It is used for installing a web browser plugin, addons, extensions, etc.

XPI add ons can be installed by simply dragging and dropping into any open Firefox browser window. Mozilla uses XPInstall to read the installation instructions contained in the XPI file, which are later executed for the installation.

Chromium-based browsers like Chrome, Opera, and Edge use CRX files as extension installers. Safari uses SAFARIEXTZ. CRX files can’t be used to install extensions in Mozilla. XPIs can’t be used in Chromium-based browsers. However, the underlying API is the same for all these browsers, due to which maintenance of extensions is pretty easy.

How to add extensions in Firefox using Selenium WebDriver and Python?

Now that we have covered the fundamentals of extensions in Firefox, let’s look at how to add Firefox extensions using Selenium WebDriver and Python. Let’s look at the various approaches available to leverage Selenium and Firefox extensions for Selenium web automation.

Using install_addon API of Selenium WebDriver to add Firefox extensions using Python

The install_addon method of the Selenium WebDriver takes two input arguments – path to the desired Firefox extension and a Boolean value which indicates whether installation of the extension is temporary (or not).

Step 1 : Let’s download the XPIs of the target Firefox extensions.

You can point your cursor to the “ADD to Firefox button,” right-click and copy the XPI link. Then, open it in a new tab.

Alternatively, you can find a dedicated XPI download link by opening the extension’s landing page in a different browser than Firefox.

For demonstration, we’re downloading the following Firefox extensions – “VPN Master” and “Ghostery Privacy Ad Blocker.” The XPI downloader link for VPN Master is available below the green-colored button (visible in the below image) if opened using Chrome.

Step 2 : Here’s how the webdriver’s install_addon function is implemented for installing install the add-on in Mozilla:

def install_addon(self, path, temporary=None):
    # Usage: driver.install_addon('/path/to/firebug.xpi')
    # ‘self’ refers to the “Webdriver” class
    # 'path' is absolute path to the addon that will be installed
    payload = {"path": path}
    if temporary:
        payload["temporary"] = temporary
    # The function returns an identifier of the installed addon.
    # This identifier can later be used to uninstall installed addon.
    return self.execute("INSTALL_ADDON", payload)["value"]

Now, let’s use this install_addon method to install the Ghostery Firefox extension temporarily.

Shown below is the Python implementation that uses Selenium WebDriver and install_addon method to install the Ghoserty plugin. The first two lines import the dependent libraries. I have added sufficient comments in the try, except, and finally python code block for easing the code walkthrough process.

Filename: FFExt.py

from selenium import webdriver
import time

try:
    # Fire a remote Firefox instance using geckodriver.
    # You need to have Geckodriver in the same directory as the automation testing script OR
    # you need to add it in the "path" environment variable OR 
    # you need to know the full path to the geckodriver executable file and use it as:
    # driver = webdriver.Firefox(executable_path=r'your\path\geckodriver.exe') 

    driver = webdriver.Firefox()

    # path to your downloaded Firefox addon extension XPI file

    extension_path = "G:\\jsalert\\vpnxpi\\ghostery_privacy_ad_blocker-8.5.5-an+fx.xpi"

    # using webdriver's install_addon API to install the downloaded Firefox extension

    driver.install_addon(extension_path, temporary=True)

    # Opening the Firefox support page to verify that addon is installed

    driver.get("about:support")

    # xpath to the section on the support page that lists installed extension

    addons = driver.find_element_by_xpath('//*[contains(text(),"Add-ons") and not(contains(text(),"with"))]')
    # scrolling to the section on the support page that lists installed extension

    driver.execute_script("arguments[0].scrollIntoView();", addons)

    # introducing program halt time to view things, ideally remove this when performing test automation in the cloud using LambdaTest

    print("Success. Yayy!!")

    time.sleep(20)

except Exception as E:

    print(E)

finally:

    # exiting the fired Mozilla Firefox selenium webdriver instance

    driver.quit()

    # End Of Script
{"mode":"full","isActive":false}

Test Execution

Run the test by triggering the following command on the terminal:

python FFExt.py

Here is the execution output of the Firefox extension example that used Selenium WebDriver:

As seen from the execution snapshot, the Ghostery plugin icon appears at the top right corner. The Firefox extension installed using the install_addon method (of Selenium WebDriver) is enabled by default.

Let’s try this: Comment out the following line.

driver.install_addon(extension_path, temporary=True)

As seen in the below snapshot, the Ghostery extension is no longer a part of the installed extensions since it was installed temporarily.

Using PyTest to add Firefox extensions using Selenium and Python

PyTest is an open-source Python testing framework that is more extensively in place of the PyUnit framework. You can use PyTest for writing small tests and complex functional tests for python-based applications/libraries. On Github, PyTest clocks 7.4k+ stars. You can check out our existing blog for a quick recap on Selenium web automation in Python using PyTest.

File Name: FFExt.py

from selenium import webdriver
import time
import pytest

# Pytest fixture is used when before running the test you need to execute some code

@pytest.fixture
def FFExt():
        driver = webdriver.Firefox()
        extension_path = "G:\\jsalert\\vpnxpi\\ghostery_privacy_ad_blocker-8.5.5-an+fx.xpi"
        driver.install_addon(extension_path, temporary=True)
        driver.get("about:support")
        addons = driver.find_element_by_xpath('//*[contains(text(),"Add-ons") and not(contains(text(),"with"))]')
        driver.execute_script("arguments[0].scrollIntoView();", addons)
        time.sleep(10)
        addons1 = driver.find_elements_by_xpath('//*[contains(text(),"Add-ons") and not(contains(text(),"with"))]/following-sibling::*[1]/*[2]/*/*[1]')

# a list is created to return names of all the installed addons
        addonsList = []
        for addon in addons1:
            addonsList.append(addon.text)
        time.sleep(10)
        driver.quit()
        return addonsList

# This is the test function that will ASSERT whether addon is present in the list of installed add-ons returned by the FFExt function.

def test_addon(FFExt):
    ghostery = "Ghostery – Privacy Ad Blocker"
    assert ghostery in FFExt
{"mode":"full","isActive":false}

Run the test by triggering the following command on the terminal:

pytest FFExt.py

Here is the execution snapshot, which indicates that one test was successful.

Note: For every python project, pytest is the perfect choice for a reliable and maintainable testing architecture. For a quick overview on getting started with pytest, check out the video below from LambdaTest YouTube Channel.

Using pre-loaded Firefox extensions and FirefoxProfile in Selenium WebDriver

FirefoxProfile is a collection of settings, extensions, and customizations done on top of the Firefox browser. You can create several Firefox profiles to tailor-make the look & feel of the browser as per your preferences.

To add Firefox extensions in Selenium using FirefoxProfile, please follow the below-mentioned steps:

Step 1 : Create a Firefox profile. Before doing so, you need to close all the active Firefox windows.

Step 2 : Press “win + R” to open the Run dialog window. Type “firefox.exe -P” and press OK.

Step 3 : Now, click on the Create Profile button.

Step 4 : Click Next.

Step 5 : Enter a name for your new Firefox profile. Copy path to the destination folder (this will be required later). Click Finish to create the profile.

Step 6 : Launch Firefox with your newly created profile.

Step 7 : Add Ghostery Addon to this profile.

Now, let’s write a PyTest script to check if the Ghostery extension is installed when we launch the created Firefox profile in a remotely-controlled Firefox instance using Selenium Python.

Existing Firefox profile can be loaded in Selenium webdriver using:

webdriver.FirefoxProfile("\\path to the new Firefox profile’s folder")

Filename: FFExt_method_2.py

from selenium import webdriver
import time
import pytest

@pytest.fixture
def FFExt2():
    # the value you pass to parameter should be the name of folder which represents your target Firefox profile, you created earlier
    profile = webdriver.FirefoxProfile("G:\\7m1dwmtw.FFExt")
    driver = webdriver.Firefox(profile)
    time.sleep(5)
    driver.get("about:support")
    addons = driver.find_element_by_xpath('//*[contains(text(),"Add-ons") and not(contains(text(),"with"))]')
    driver.execute_script("arguments[0].scrollIntoView();", addons)
    addons1 = driver.find_elements_by_xpath('//*[contains(text(),"Add-ons") and not(contains(text(),"with"))]/following-sibling::*[1]/*[2]/*/*[1]')
    addonsList = []
    for addon in addons1:
        addonsList.append(addon.text)
    time.sleep(10)
    driver.quit()
    return addonsList

# this is the test function that will assert whether addon is present in the list of installed addons returned by FFExt function.

def test_addon(FFExt2):
    ghostery = "Ghostery – Privacy Ad Blocker"
    assert ghostery in FFExt2
{"mode":"full","isActive":false}

Run the following command on the terminal to trigger the test:

pytest FFExt_method_2.py

Here is the execution snapshot:

Conclusion:

Extensions, especially VPN extensions, are often required to test how your application would perform across different geographies. Also, if you’ve implemented an adBlocker detection technology in your web application, then you need to install adBlocker extensions to check if your adBlocker detection technology is effective.

In this part of the Selenium Python tutorial, we had a look at two different mechanisms to install addons in Selenium-controlled Firefox instances. Talking of extensions, we hope you already have LambdaTest chrome extension installed to test applications on the go. LambdaTest is a stellar tool for all your Selenium web automation requirements in the cloud. Do check out LT Browser and test applications across 50+ mobile screens.

Happy Testing!

CircleCI Vs. GitLab: Choosing The Right CI/CD Tool

codepoetn — Mon, 15 Mar 2021 08:14:19 +0000

He is a gifted driver. Famed for speed, reverse J, and drifts. He can breeze through the Moscow and Mexico traffic without sweating a drop. Of course, no one gets cracking on Bengaluru roads 😛 But despite being so adept behind the wheels, he sometimes fails to champ the street races. Screeching tyres buzz in his head doesn’t let him sleep at times. I wish to tell him it’s not always about the driver, sometimes it’s the engine. That’s what happens when the right dev talent uses wrong, inefficient, incompatible CI/CD tools. The DevOps technologies you chose can abruptly break or smoothly accelerate your software development cycle. This article explores the Ford & the Ferrari of the CI/CD world in detail, CircleCI vs. GitLab, to help you pick the right one.

Why is CI/CD important?

Modern software development approaches prioritize automating repetitive processes. ‘Lean, modular, iterative’ development is the new mantra of the dev community.

CI/CD tools help in boosting ROI by:

Cutting costs.
Speeding up time-to-market. Check how Financial Times optimized the test cycle from about 10 days to less than a day.
Winning & retaining customers.
Streamlining the process of integrating independently developed software modules.
Continuously testing application components independently as well as in an integrated state.
Continuously delivering new features as an integrated application.

According to marketsandmarkets, QA automation testing is growing at a whopping 18% CAGR and is estimated to hit USD 28.8 Bn in 2024. The upsurge in the adoption of automation tools further bolsters the belief in CI/CD development approach. Can there be any smoke without a fire?

How CI/CD Works?

If you’re new to CI/CD, you must be thinking, “okay! I get the benefits, but how is all this implemented under the hood?”. Basically,

You use a hooked CI tool (hooks are a way to listen for change requests in the repository constantly) to your code repository.
As soon as you try pushing the code to the repository, CI scripts get triggered. These scripts are lines of code in Python, C#, or any scripting language of your choice. The CI scripts build the application with newly pushed code and checks for any defects by subjecting it to automated unit tests & integration test scripts. These tests can be functional and non-functional. If there are errors, CI tools can be configured to alert the responsible authorities automatically.
If the new code passes all tests, it is pushed to the continuous delivery stage and subsequently to the continuous deployment stage.

Each stage of CI/CD is critically dependent on robust automation tests. In short, continuous testing is the backbone of the entire CI/CD pipeline. Follow these CI/CD best practices to harvest optimum benefits out of it.

Now having answered what CI/CD pipeline is and highlighting the three obvious benefits of using DevOps tools, let’s briefly list some of the popular open-source and commercial CI/CD tools. Then we jump to the meat of this article, i.e., nose-to-nose comparison of CircleCI vs. GitLab.

What are some of the most popular CI/CD tools?

Jenkins is the jack of all things in CI/CD. It’s server-based & open-sourced. Using Jenkins, you can automate almost the entire SDLC, everything from development & integration to testing, delivery, and deployment.

TeamCity, CircleCI, Bamboo, Codeship, GoCD, GitLab, Semaphore are some other popular CI/CD tools every DevOps engineer can play around with. Some of these are open-sourced, some commercially managed-solutions. Other than these, a DevOps guy would also have following gears up his sleeves.

Configuration automation tools
- Ansible, Chef, Puppet, SolarWinds, CFEngine
Container runtimes & orchestration tools
- Docker, Kubernetes, Amazon ECS, Containers

CircleCI Overview

What is CircleCI?

CircleCI, like GitLab, is a modern CI/CD solution. This tool automates the “build, test, deploy workflow of an SDLC.” CircleCI can be used in the cloud as a SaaS tool with an option to run self-hosted runners for better supervising security aspects. Alternatively, you may also consider installing the CircleCI platform on your private server and have 100% control over it.

How CircleCI works?

CircleCI integrates with your code version control system, say GitHub or Bitbucket. Now, every time a developer pushes code to the repository, CircleCI creates a pipeline to process the code and test it against pre-scripted test-cases at various stages.

CircleCI automatically runs this newly committed code in an isolated container or a virtual machine. Suppose the new code fails any predefined tests. In that case, CircleCI can be configured to notify your authorized team-mates so that appropriate action, say debugging, code revision, or code roll-back, can be initiated. And if the committed code successfully passes the pipeline, it gets pushed to your target staging or deployment environment.

What are CircleCI Orbs?

CircleCI orbs are

Condensed lines of reusable build config script.
Shareable packages.
Open-sourced and helps in speeding up CI/CD setup.
Reduce the complexity and number of code lines you need to write for integrating your stack with the CI/CD pipeline. Here’s a demo.

Noteworthy CircleCI features:

Custom build environments & language support.
- CircleCI can be configured to imitate your target deployment environment by configuring your pipeline execution environment using a Docker image or a LINUX/Windows/macOS virtual machine(VM).
- You can use a pre-built docker image provided by CircleCI, or you may choose your own Docker Hub image as the runtime environment.
- CircleCI pre-installs Android SDK, NDK, and other dependencies and enables you to build and test Android apps on a Linux VM.
- It supports a wide range of languages, including PHP, Python, Java, Javascript, ReactNative, RoR, Elixir, Scala, etc.
Cloud, as well as Self-hosted CI/CD solution.

As already discussed, CircleCI can be leveraged to orchestrate CI/CD pipeline either in the CircleCI’s cloud-hosted computes or, you can also implement CI/CD by running CircleCI on your infrastructure. This would give you complete authority to control functionalities and maintenance work.

Note- macOS environment is limited to CircleCI’s cloud-hosted solution.

Highly extensible with integrations.
- You can integrate CircleCI with AWS cloud ecosystem, Azure, DeployHub, Cloud Foundry, Google Cloud, OpenShift, Serverless, and several other environments/platforms to deploy your application.
- For testing, you can integrate CircleCI with platforms like LambdaTest.
- Find the full set of integrations here.
Security and Performance
- With CircleCI, you have application-level security and isolated runtime environment security.
- CircleCI is SOC II, and fedRamp certified.
- If your CI/CD pipeline implemented using CircleCI fails, you can SSH into your failed build and quickly debug it.
- Effectively uses caching to speed-up builds.
- Minimal setup overheads.
- CircleCI Orbs speeds-up CI/CD pipeline setup process.
- Single config.yml file contains all configuration details in a declarative style.

Who uses CircleCI?

Facebook, Kickstarter, Spotify, Lyft, Coinbase, Expedia, and more.

What is GitLab CI/CD?

GitLab positions itself as a SaaS-based holistic DevSecOps platform. What does that mean? It means it is a web-based git repository that allows you to plan your software and manage the entire development & operations cycle from managing source code to issue tracking, code integration, continuous testing, delivery, and deployment. It attempts to eliminate toolchain complexities involved in agile development methodology. In short, GitLab is a complete ecosystem for DevSecOps. For brevity and fair comparison, let’s limit ourselves to a niche GitLab product, i.e., GitLab CI/CD.

What are GitLab CI/CD and GitLab Runner?

GitLab CI/CD is a UI based web application that manages your projects or builds. It is also accessible through APIs. GitLab Runner processes your builds, i.e., runner applications execute the code in .gitlab-ci.yml configuration file. It runs the script by working in tandem with GitLab CI/CD via an API interface. Runners can run tests in any language across platforms.

How GitLab CI/CD works?

You need to install and register a runner for your project. Define your CI/CD jobs in a structured order and with well-defined actions if certain conditions are met while executing these jobs. Save this YAML file as .gitlab-ci.yml file in the root directory of your project.
When you push config files to your repository, the runner runs these specified jobs.
Usually, a GitLab CI/CD pipeline would contain four stages – build, test, staging, and production. If your code commit passes all these stages, it is successfully delivered/deployed.

Related Read: How to build an Automated Testing Pipeline With GitLab CI/CD & Selenium Grid.

Noteworthy GitLab CI/CD features:

Multi-environment, multi-platform, multi-language.
- GitLab CI/CD can be used to execute your build scripts on any platform that supports GO, including Windows, macOS, Unix, etc. It works with any language of your choice, including PHP, Python, Java, C, Ruby, etc.
GitLab CI/CD Cloud vs. Self-hosted.
- You can use GitLab cloud, i.e., gitlab.com, or you can self-host it. You can self-host it on your infrastructure, including on a bare-metal server or in Kubernetes on a public cloud, totally up to you.
Integrations
- GitLab CI can be used with GitHub, BitBucket, or any other GIT based server.
- GitLab platform can be used with Jenkins CI too.
- HipChat, Slack, Auth0, SAML, Bitbucket, Vault, and several other integrations are available to streamline project lifecycle management.
Security & performance
- Autoscaling, autoDevOps, parallel builds, and container registry features aim to improve the performance of GitLab CI/CD.
- GitLab provides SAST, DAST, Dependency scanning, fuzz testing, secret detection, and license compliance features for delivering highly secure applications.

Who uses GitLab?

Thomson Reuters, Siemens, HotJar, Nvidia, Goldman Sachs, and more.

CircleCI Vs. GitLab: Ratings

Automation saves so much time. What do nerds do with the extra time? We debate which tool is better—just kidding. We channelize the extra time at hand in doing more productive work and growing company revenue. But a DevOps team isn’t a DevOps team if they haven’t discussed which CI/CD tools are better, easy to use, and efficient. CircleCI vs. GitLab is one such hot topic in the automation community. Both CircleCI & GitLab were launched around the same time in 2011. Let’s evaluate their strengths & shortcomings:

What does the StackShare, G2 community have to say?

Do you know G2 awards 4.4 stars to both GitLab & CircleCI? Just like GitHub stars, StackShares stack counts reflect the popularity of technology. CircleCI boasts around 7.4k stacks, while GitLab enjoys 31.1k stacks. Besides, GitLab as well as GitLab CI are open-source technologies and have garnered 22k+ stars on GitHub. Wait, this is not a reflection of how good GitLab is at CI/CD. These numbers reflect overall popularity. CircleCI is primarily “a niche-focused continuous integration tool” while GitLab wears multiple hats, including “version control & code collaborator.”

CircleCI fans on StackShare are gaga about:

GitHub integration
Easy Setup
Fast build
Competitive price
Slack Integration

GitLab fans on StackShare cherishes:

Self-hosted
Open-source
Community edition
Familiar interface
Easy setup

CircleCI Vs. GitLab: Version Control System & Integrations

A major differentiating factor between the two is:

CircleCI works in integration with any version control system (VCS), say GitHub or bitbucket. CircleCI can be integrated with 50+ tools & services, including Slack and LambdaTest.
GitLab provides out-of-the-box, in-built Git VCS, but it can also be used with GitHub for 400 free CI pipeline minutes. Beyond that, a user needs to upgrade plans. GitLab CI/CD can be used for Bitbucket cloud as well. GitLab chatOps enables working with CI/CD from slack chat interface. Plus, it can work with 160+ other tools and platforms, including LambdaTest.

How this impacts your choice of CI/CD tools?

The main intent behind implementing CI/CD pipelines is optimizing workflows. If your CI/CD tool natively supports the source control hosting service you’re using or external tools you want to integrate, then managing & addressing tickets would be easier and quicker. If you have to wait for days to solve issues, then the automation purpose is diluted. Both the tools provide flexibility in choosing your repository hosting but being an all-in-one solution, GitLab would have the edge over CircleCI as the learning curve gets shorter when you’ve to learn only one tool.

CircleCI Vs. GitLab: Parallel & Distributed Builds

Both CircleCI & GitLab can speed up the CI/CD pipeline processes by executing jobs in parallel. CircleCI workflow achieves this by running each build in an isolated containerized environment. In GitLab, you can configure the YAML file to perform parallel operations based on runner availability.

Distributed job execution means horizontally scaling builds based on stages to multiple machines. CircleCI’s SaaS version distributes by default to several builder machines and is subject to availability, and there might not be any job queue. If you’re using the self-hosted CircleCI version, CircleCI still provides all the tools in-built to manage your clusters. GitLab too supports distributed scaling.

Container Environments

Docker Container Registry & Docker CI Runner comes pre-integrated with GitLab CI and avails complete CI/CD container workflow. Circle CI supports container build environments and runs each build in an isolated environment reset after every run. This translates into easy-identification of environment-born bugs.

Maintenance Support

All GitLab plans except the free version have a next business day support system. CircleCI provides premium support for customers who need it, and for others, it provides email-support. For free tier users, community support is available. Cloud CI plan or CircleCI is fully automated and doesn’t need any maintenance service.

Hosting, Platform, Language, API, Plugin Support

GitLab CI is available over the web and can run builds on any platform supporting GO, i.e., Windows, Unix, and macOS. It supports all major scripting and test automation languages, including Java, PHP, Ruby, C, Python. CircleCI is a cross-platform CI/CD solution; it supports Windows, macOS, managed cloud hosting, and you may even self-host on your dedicated infrastructure. Like GitLab, CircleCI supports all popular scripting technologies.

FEATURE	CIRCLECI	GITLAB CI/CD
VCS INTEGRATION
GITHUB, BITBUCKET	YES	YES
IN-BUILT VCS	NO	YES
DEBUGGING	YES	NO
FREE-TIER	YES	YES
CONTINUOUS INTEGRATION	YES	YES
CONTINUOUS DEPLOYMENT	YES	YES
MAINTENANCE	EMAIL, PREMIUM, COMMUNITY	COMMUNITY, NEXT BUSINESS DAY SUPPORT, PRIORITY SUPPORT
PARALLEL & DISTRIBUTED BUILDS	YES	YES
APIs	RESTful	RESTful, GRAPHQL
SCHEDULING	YES	USING CRON LIKE SETUP, YES
CONTAINER/ DOCKER	YES	SHIPS WITH DOCKER
SUPPORT	–	REGISTRY

CONCLUSION: Integrating CI/CD Tool With LambdaTest

As you would have noticed, I referred to this comparison as Ford Vs. Ferrari. It was for a reason. Both the tools are equally good for streamlining your SDLC and implementing CI/CD for business agility. What is best suited to you is dependent on the tools you wish to integrate them with. LambdaTest cloud Selenium Grid allows easy integration with both CircleCI and GitLab. Evaluate wisely before coming to a decision. Wrong tools can push developer productivity in the valley; the right compatible tools can peak it. For automation testing, the LamdaTest platform has got your back; pick your CI/CD tool, and integrate it with LambdaTest.

How To Get Page Source In Selenium Using Python?

codepoetn — Tue, 02 Mar 2021 08:03:26 +0000

Retrieving the page source of a website under scrutiny is a day-to-day task for most test automation engineers. Analysis of the page source helps eliminate bugs identified during regular website UI testing, functional testing, or security testing drills. In an extensively complex application testing process, automation test scripts can be written in a way that if errors are detected in the program, then it automatically.

saves that particular page’s source code.
notifies the person responsible for the URL of the page.
extracts the HTML source of a specific element or code-block and delegates it to responsible authorities if the error has occurred in one particular independent HTML WebElement or code block.

This is an easy way to trace, fix logical and syntactical errors in the front-end code. In this article, we first understand the terminologies involved and then explore how to get the page source in Selenium WebDriver using Python.

What Is An HTML Page Source?

In non-technical terminology, it’s a set of instructions for browsers to display info on the screen in an aesthetic fashion. Browsers interpret these instructions in their own ways to create browser screens for the client-side. These are usually written using HyperText Markup Language (HTML), Cascading Style Sheets (CSS) & Javascript.

This entire set of HTML instructions that make a web page is called page source or HTML source, or simply source code. Website source code is a collection of source code from individual web pages.

Here’s an example of a Source Code for a basic page with a title, form, image & a submit button.

<!DOCTYPE html>
<html>
<head>
  <title>Page Source Example - LambdaTest</title>
</head>
<body>

<h2>Debug selenium testing results : LambdaTest</h2>

<img src="https://cdn.lambdatest.com/assetsnew/images/debug-selenium-testing-results.jpg" alt="debug selenium testing" width="550" height="500"><br><br>
<form action="/">
  <label for="debug">Do you debug test results using LambdaTest?</label><br>
  <input type="text" id="debug" name="debug" value="Of-course!"><br>
<br>
  <input type="submit" value="Submit">
</form> <br><br>
<button type="button" onclick="alert('Page Source Example : LambdaTest!')">Click Me!</button>
</body>
</html>

What Is An HTML Web Element?

The easiest way to describe an HTML web element would be, “any HTML tag that constitutes the HTML page source code is a web Element.” It could be an HTML code block, an independent HTML tag like </br>, a media object on the web page – image, audio, video, a JS function or even a JSON object wrapped within <script> </script> tags.

In the above example – <title> is an HTML web element, so is

and the children of body tags are HTML web elements too i.e., <img>, <button> etc.

How To Get Page Source In Selenium WebDriver Using Python?

Selenium WebDriver is a robust automation testing tool and provides automation test engineers with a diverse set of ready-to-use APIs. And to make Selenium WebDriver get page source, Selenium Python bindings provide us with a driver function called page_source to get the HTML source of the currently active URL in the browser.

Alternatively, we can also use the “GET” function of Python’s request library to load the page source. Another way is to execute javascript using the driver function execute_script and make Selenium WebDriver get page source in Python. A not-recommended way of getting page source is using XPath in tandem with “view-source:” URL. Let’s explore examples for these four ways of how to get page source in Selenium WebDriver using Python –

We’ll be using a sample small web page hosted on GitHub for all four examples. This page was created to demonstrate drag and drop testing in Selenium Python using LambdaTest.

Get HTML Page source Using driver.page_source

We’ll fetch “pynishant.github.io” in the ChromeDriver and save its content to a file named “page_source.html.” This filename could be anything of your choice. Next, we read the file’s content and print it on the terminal before closing the driver.

from selenium import webdriver

driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://pynishant.github.io/")
pageSource = driver.page_source
fileToWrite = open("page_source.html", "w")
fileToWrite.write(pageSource)
fileToWrite.close()
fileToRead = open("page_source.html", "r")
print(fileToRead.read())
fileToRead.close()
driver.quit()

On successful execution of the above script, your terminal output will show the following page source.

Get HTML Page Source Using driver.execute_javascript

In the previous example, we have to comment out (or replace) the “driver.page_source” line and add the following line. “driver.execute_script is a Selenium Python WebDriver API to execute JS in Selenium environment. Here, we execute a JS script that returns an HTML body element.

# pageSource = driver.page_source
pageSource = driver.execute_script("return document.body.innerHTML;")

The output code looks like this-

As you can observe, it only returns the innerHTML of the body element. Like the last output, we do not get the whole page source. To get the entire document, we execute “document.documentElement.outerHTML”. The execute_script line now looks like this-

pageSource = driver.execute_script("return document.documentElement.outerHTML;")

This gives us precisely the output we got using “driver.page_source.”

Fetch Page Source Using Python’s Request Library In Selenium WebDriver. This method has nothing to do with Selenium, it’s a purely ‘Pythonic’ way to get a webpage source. Here, we use Python’s request library to make a get request to the URL and save the request’s response, i.e., page source to an HTML file and print on the terminal.

Here is the script –

import requests
url = 'https://pynishant.github.io/'
pythonResponse = requests.get(url)
fileToWrite = open("py_source.html", "w")
fileToWrite.write(pythonResponse.text)
fileToWrite.close()
fileToRead = open("py_source.html", "r")
print(fileToRead.read())
fileToRead.close()

This method can be used to quickly store a webpage source code without loading the page in the Selenium-controlled browser. Similarly, we can use the urllib Python library to fetch the HTML page source.

Get HTML Page Source Using “view-source:” URL

This is rarely required, but you can append the target URL with “view-source” and load it in the browser window to load the source code and save it in manual testing.

Programmatically to take source code of screenshots in Python Selenium (if required), you can load the page using –

driver.get("view-source:https://pynishant.github.io/")

Get HTML Page Source In Selenium Python WebDriver Using XPath

The fourth method to make Selenium WebDriver get a page source is to use XPath for saving it. Here, instead of page_source or executing JavaScript we identify the source element, i.e., <html> and extract it. Comment out the previous page source fetching logic and replace it with the following-

# pageSource = driver.page_source
pageSource = driver.find_element_by_xpath("//*").get_attribute("outerHTML")

In the above script, we are using a driver method, “find_element_by_xpath,” to locate the web page’s HTML element. We enter the document using source node – "//*" and get its “outer HTML,” which is the document itself. The output looks the same as we got earlier using driver.page_source.

How To Retrieve HTML Source Of WebElement In Selenium?

To get the HTML source of a WebElement in Selenium WebDriver, we can use the get_attribute method of the Selenium Python WebDriver. First, we grab the HTML WebElement using driver element locator methods like (find_element_by_xpath or find_element_by_css_selector). Next, we apply the get_attribute() method on this grabbed element to get it’s HTML source.

Suppose, from pynishant.github.io, and we want to grab and print the source code of the div with id “div1”. The code for this looks like this-

from selenium import webdriver

driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://pynishant.github.io/")
elementSource = driver.find_element_by_id("div1").get_attribute("outerHTML")
print(elementSource)
driver.quit()

Here’s the output –

Similarly, to get the children or innerHTML of a WebElement –

driver.find_element_by_id("some_id_or_selector").get_attribute("innerHTML")

There is an alternative way of doing this and achieving same result –

elementSource = driver.find_element_by_id("id_selector_as_per_requirement")
driver.execute_script("return arguments[0].innerHTML;", elementSource)

How To Retrieve JSON Data From An HTML Page Source In Python Selenium WebDriver?

Modern applications are built with multiple APIs at play. And often, these API dynamically change the content of HTML elements. JSON objects have emerged as an alternative to XML response types. So, it has become essential for a pro Selenium python tester to handle JSON objects, especially those embedded in <script> HTML tags. Python provides us with an in-built JSON library to experiment with JSON objects.

To demonstrate with an example – we load “https://www.cntraveller.in/” in Selenium driver and look-out for SEO schema contained in <script type=”application/ld+json”> </script> to verify that logo URL is included in the “JSON” schema. By the way, if you feel confused, this “SEO schema” is useful to get web pages ranked on google. It has nothing to do with code-logic or testing. We’re using it just for demonstration.

We’ll be using LambdaTest for this demo-

from selenium import webdriver
import json
import re
username = "hustlewiz247"
accessToken = "1BtTGpkzkYeOKJiUdivkWxvmHQppbahpev3DpcSfV460bXq0GC"
gridUrl = "hub.lambdatest.com/wd/hub"
desired_cap = {
    'platform' : "win10",
    'browserName' : "chrome",
    'version' :  "71.0",
    "resolution": "1024x768",
    "name": "LambdaTest json object test ",
    "build": "LambdaTest json object test",
    "network": True,
    "video": True,
    "visual": True,
    "console": True,
}
url = "https://"+username+":"+accessToken+"@"+gridUrl
print("Initiating remote driver on platform: "+desired_cap["platform"]+" browser: "+desired_cap["browserName"]+" version: "+desired_cap["version"])
driver = webdriver.Remote(
    desired_capabilities=desired_cap,
    command_executor= url
)
# driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://www.cntraveller.in/")
jsonSource = driver.find_element_by_xpath("//script[contains(text(),'logo') and contains(@type, 'json')]").get_attribute('text')
jsonSource = re.sub(";","",jsonSource)
jsonSource = json.loads(jsonSource)

if "logo" in jsonSource:
    print("\n logoURL : " + str(jsonSource["logo"]))
else:
    print("JSON Schema has no logo url.")
try:
    if "telephone" in jsonSource:
        print(jsonSource["telephone"])
    else:
        print("No Telephone - here is the source code :\n")
        print(driver.find_element_by_xpath("//script[contains(text(),'logo') and contains(@type, 'json')]").get_attribute('outerHTML'))
except Exception as e:
    print(e)
driver.quit()

The output contains logoURL and webElement source –

Code Breakdown

The following three lines import required libraries: Selenium WebDriver, Python’s JSON, and re library to handle JSON objects and use regular expressions.

from selenium import webdriver
import json
import re

Next, we configure our script for running it successfully on LambdaTest’s cloud, which is quite fast and smooth. It took me less than 30 seconds to get started (maybe because I had prior experience with the platform). But even if you are a first-timer, it would take less than 1 minute. Register and login using Google and click on Profile to copy your username and access token.

username = "your_username_on_lambdaTest"
accessToken = "your lambdaTest access token"
gridUrl = "hub.lambdatest.com/wd/hub"
desired_cap = {
    'platform' : "win10",
    'browserName' : "chrome",
    'version' :  "71.0",
    "resolution": "1024x768",
    "name": "LambdaTest json object test ",
    "build": "LambdaTest json object test",
    "network": True,
    "video": True,
    "visual": True,
    "console": True,
}
url = "https://"+username+":"+accessToken+"@"+gridUrl

We launch the driver in full-screen mode and load the cntraveller home page with the following line of code –

driver = webdriver.Remote(
    desired_capabilities=desired_cap,
    command_executor= url
)
# driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://www.cntraveller.in/")

Now, we locate JSON objects containing script using XPath locator and delete the unnecessary semicolons to load the string in JSON format properly.

jsonSource = driver.find_element_by_xpath("//script[contains(text(),'logo') and contains(@type, 'json')]").get_attribute('text')
jsonSource = re.sub(";","",jsonSource)
jsonSource = json.loads(jsonSource)

And then, we check if the logo URL is present. If present, we print it.

if "logo" in jsonSource:
    print("\n logoURL : " + str(jsonSource["logo"]))
else:
    print("JSON Schema has no logo url.")

Also, we check if the telephone detail is present. If not, we print the source code of the WebElement.

try:
    if "telephone" in jsonSource:
        print(jsonSource["telephone"])
    else:
        print("No Telephone - here is the source code :\n")
        print(driver.find_element_by_xpath("//script[contains(text(),'logo') and contains(@type, 'json')]").get_attribute('outerHTML'))
except Exception as e:
    print(e)

Lastly, we quit the driver.

driver.quit()

How To Get Page Source As XML In Selenium WebDriver?

If you’re loading an XML-rendered website, you may want to save the XML response. Here’s a working solution for making Selenium get XML page source –

drive.execute_script(‘return document.getElementById(“webkit-xml-viewer-source-xml”).innerHTML’)

Conclusion

You can use any of the above-demonstrated methods and leverage the agility & scalability of LambdaTest Selenium Grid cloud to automate your test processes. It lets you execute your test cases on 2000+ browsers, operating systems, and their versions. Also, you can integrate the automation testing flow with modern CI/CD tools and adhere to the best continuous testing practices.

So, start automating your day-to-day tasks and make your life easier with LambdaTest right away.

Happy Testing!

How To Switch Tabs In A Browser Using Selenium Python?

codepoetn — Tue, 23 Feb 2021 09:00:01 +0000

Selenium automation offers dexterous ways to perform day-to-day tasks most efficiently. From capturing screenshots to testing PDF files, there’s no limit to what you can do with Selenium automation. Developers and testers are masters of drilling websites and finding loopholes. More often than not, this drill involves switching tabs multiple times a day. To reduce the manual effort that goes into doing so, we recommend using Python Selenium to switch tabs.

In this article, we will help you master multiple ways to switch tabs in Selenium using Python.

When Do We Need To Open Or Switch Tabs In Selenium Automation?

Opening a new tab or switching between multiple tabs is one of the most basic functions performed by all of us every single day. Let us look into some scenarios when opening or switching tabs comes in handy during Selenium automation.

App Suits – Testing Features That Can Work Parallely

The most obvious scenario is when your application is too big and has mini-applications within it. For example, if you have used Linkedin, you might have come across ‘Linkedin Learning’ & ‘Linkedin Sales Navigator’ as two sub-applications. Similarly, many other applications are composed of several other smaller constituent applications. For example, G-suite, Youtube (media player & creator studio), Hubspot, Azure & Amazon, etc., some of these, by default, open up in a new tab. For others, it makes sense to intentionally open a new application in a new tab. This is where Selenium automation testing comes in.

Testing Ecommerce App Features

Let’s take another example of e-commerce application testing. Suppose you are testing an e-commerce website and you want to add a product to the cart. Then, you want to check if it gets reflected on the cart page. Next, you want to add another product to the cart. And then you want to confirm if it is visible in the cart. Doing this in the same browser window and tab could be a tenacious & time-taking task, and that’s where Selenium automation comes in.

Multimedia Uploading Functionality Testing

Another common example could be of uploading multiple videos parallelly to a vlogging platform like Vimeo or Youtube. This is an ideal case for multi-browser, cross-tab testing.

In short, automation testing involves switching tabs in the following scenarios –

Testing parallel features of large applications. E.g., Zoho, G-suite, Office365, etc.
Testing links that automatically open in a new tab. E.g. – eCommerce applications
Parallel testing of independent applications if the need arises.

In this Python Selenium switch tabs tutorial, we will be focusing on opening and switching between the tabs using Python & Selenium. We have dedicated articles for on-page testing operations like handling alerts, drag and drop objects using a mouse, or taking full-page screenshots. You may want to refer to those to dive deeper into Selenium automation use cases.

How To Create A New Tab In Selenium Python?

In order to get started with Python Selenium switch tabs automation, your system needs to be equipped with the required tools. Here are all the prerequisites:

You have the latest Selenium-Python bindings, Python3, pip, virtualenv installed in your system
You also have a path to the executable WebDriver of your browser choice in your system.

If not, you can simply follow the instructions given in this Selenium 4 with Python blog to get started with Python Selenium switch tab automation. We can open new tabs in Selenium-Python by executing JavaScript as well as by using Selenium’s ActionChains class.

Let’s see how this can be done.

Open New Tabs In Selenium By Executing JavaScript

In the following code, replace “chrome_webdriver_executable_path” with the path to your chrome executable. Ideally, you should add it in your systems PATH variable.

Sample Code 1-

from selenium import webdriver
import time
driver = webdriver.Chrome(chrome_webdriver_executable_path)
driver.maximize_window()
driver.get("https://www.cntraveller.in/")
# to fire up a new tab using javascript and load google.com
driver.execute_script('''window.open("https://www.google.com", "_blank");''')
time.sleep(5)
driver.quit()

execute_script is a method provided by Selenium to execute JavaScript snippets inside the remotely controlled browser. It could be used to scroll the webpage, open a new window, fire-up an alert, and a lot more. window.open is a DOM method to launch new tabs. It accepts URL, name, specs and replaces them as parameters. For our Selenium automation testing use-case, we’re only concerned with the URL & name. You may use specs to launch new tabs in different sizes and configurations.

In “Sample Code 1”, if you want to open a blank tab in Selenium Python, then replace the line after the comment with the following code –

driver.execute_script('''window.open("", "_blank");''')

Or another equivalent would be –

driver.execute_script('''window.open();''')

As “_blank” is the default value for the optional “name” parameter. “_parent”, “_self”, “_top” are some other values it can take to open the “url” in the parent frame, same window, or top frame, respectively.

Open New Tabs In Selenium By Executing ActionChains Class

The second way to launch a new tab in Selenium is to use the key_up and key_down method of Selenium’s ActionChains class and click on an HTML element with a link.

Sample Code 2-

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
import time
from selenium.webdriver.common.keys import Keys
driver = webdriver.Chrome(chrome_webdriver_executable_path)
driver.get('https://www.lambdatest.com/')
time.sleep(5)
# locates a link element on the loaded url using xpath
new_tab_link = driver.find_element_by_xpath('//a[contains(@class,"nav-link") and contains(@href,"selenium-automation")]')
time.sleep(5)
# instantiates ActionChains class of selenium webDriver
action = ActionChains(driver)
# clicks on located kink element with CONTROL button in pressed state using actionChains class. This opens the link in new tab 
action.key_down(Keys.CONTROL).click(new_tab_link).key_up(Keys.CONTROL).perform() 
time.sleep(3)
driver.quit()

ActionChains class of selenium grid enables low-level interactions with the web application elements. Selenium automation testers often use it to move the mouse cursor, double-clicking an HTML element, dragging and dropping operations, and of course, to press keyboard keys. Key_down method of ActionChains imitates pressing a key passed as a parameter. The Key_up method releases the pressed key. Again, the key is passed as the parameter to the key_up method.

Open New Tabs In Selenium By Executing send_keys

Another way to open new tabs in Selenium is by using send_keys to the “body” element. This is the syntax used-

driver.find_element_by_tag_name('body').send_keys(Keys.CONTROL + 't')

Note: You’ll find a lot of solutions on the web claiming – ‘This is identical to pressing Ctrl & ‘t’ key together on user-controlled browsers.’ or ‘This method fires up a new tab on the element in focus.’ If you have to open a link in a new tab, get the location of an element using XPath or CSS selectors and nest send_keys operation on it with Keys.CONTROL + ‘t’ as parameters. But sadly, this doesn’t work. We checked with the latest Selenium & Python version on the date of publishing this article.

How To Switch Tabs In Selenium Python?

Switching tabs in selenium python is not that cumbersome. We can use the current_window_handle & window_handles method of Selenium WebDriver to automate tab switching in the Selenium Grid using Python. Besides, we can also use ActionChains class to switch tabs in remotely controlled cross-browser automation testing.

Switch Tabs In Selenium Python By Executing switch_to_window, switch_to.window, current_window_handle & window_handles

In this Selenium Python switch tab tutorial, we can get started by using several methods, including switch_to_window, switch_to.window, current_window_handle & window_handles. Before we jump off to the execution, you must note that the switch_to_window method is now deprecated, and the switch_to.window method has replaced it.

import unittest
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
import time
from selenium.webdriver.common.keys import Keys
class SwitchTab(unittest.TestCase):
    def setUp(self):
        # self.driver = webdriver.Firefox()
        self.driver = webdriver.Chrome(chrome webdriver executable location)
    def test_switch_tab(self):
        driver = self.driver
        driver.maximize_window()
        driver.get('https://www.lambdatest.com/')
        time.sleep(5)
# collects handle ID of current window
        first_tab_handle = driver.current_window_handle
        print("first_tab_handle : "+str(first_tab_handle))
        # locates a link element on the loaded url using xpath
new_tab_link = driver.find_element_by_xpath('//a[contains(@class,"nav-link") and contains(@href,"selenium-automation")]')
        time.sleep(5)
        action = ActionChains(driver)
        # clicks on the located link element with CONTROL button in pressed state using actionChains class. This opens the link in a new tab.

action.key_down(Keys.CONTROL).click(new_tab_link).key_up(Keys.CONTROL).perform() 
        time.sleep(3)
        print("driver.window_handles : " + str(driver.window_handles))
        print("current window handle : "+ str(driver.current_window_handle))
        if driver.current_window_handle == first_tab_handle:
            print("driver focus is not switched to new tab opened using actionChains.")
        else:
            print("window handle has changed. Driver switched focus to new tab.")
        driver.switch_to.window(driver.window_handles[1])
        time.sleep(3)
      # stores handle of tab opened using actionchains
        if driver.current_window_handle != first_tab_handle:
            ctrl_click_tab = driver.current_window_handle
            print("driver focus switched. New tab's handle id is - ")
            print(ctrl_click_tab)
        else:
            print("driver focus is not shifted to new tab.")
        time.sleep(5)
        driver.execute_script('''window.open("", "_blank");''')
        time.sleep(5)
        print("driver.window_handles : " + str(driver.window_handles))
        try:
            if (driver.current_window_handle == first_tab_handle) or (driver.current_window_handle == ctrl_click_tab):
                print("Though, this tab seems to be an active window as it's highlighted but driver control still remains with the tab we last switched to.")
        except:
            pass
        time.sleep(3)
        for handle in driver.window_handles:
            if (handle == first_tab_handle) or (handle == ctrl_click_tab):
                print(handle)
            else:
                js_tab_handle = handle
                print("js tab handle is -")
                print(js_tab_handle)
                driver.switch_to.window(js_tab_handle)
                time.sleep(5)
                break
        if driver.current_window_handle == js_tab_handle:
            print("driver focus shifted to js tab with handle id -")
        print(driver.current_window_handle)
        driver.get('https://www.lambdatest.com/blog/')
        # shifts control or focus to the first window in window handles, it's not the last opened tab but 1st tab in order.
        driver.switch_to_window(driver.window_handles[1])

        time.sleep(5)
        driver.get('https://www.lambdatest.com/pricing')
        driver.switch_to.window(driver.window_handles[-1])
        time.sleep(5)
        driver.get('https://www.lambdatest.com/newsletter/')
        time.sleep(3)
        driver.switch_to.window(first_tab_handle)
        if driver.current_window_handle == first_tab_handle:
            print("current_window_handle : " + str(driver.current_window_handle))
            print("driver switched to first tab")
        else:
            print("driver switching failed")
        time.sleep(5)
    def tearDown(self):
        self.driver.quit()
if __name__ == '__main__':
    unittest.main()

Code Breakdown-

Let us break down the code for better clarity on Selenium Python switch tab automation. Here it goes-

import unittest
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
import time
from selenium.webdriver.common.keys import Keys

Here, we first import all the required dependent libraries. Python’s unittest module to write test cases in Python. WebDriver module from the python-selenium library to automate browser actions. And ActionChains class from Selenium WebDriver – to automate low-level interactions using mouse and keyboard interrupts. Python time module to implicitly or explicitly pause the execution or wait. Lastly, the Keys module from Selenium WebDriver to imitate keyboard button inputs.

 def setUp(self):
        # self.driver = webdriver.Firefox()
        self.driver = webdriver.Chrome()

This is to set up your testing browser environment. If you’re using a cloud automation testing platform like LambdaTest, for that too, ideally, you have to configure settings in this function. Here we are using Chrome as our browser, but you may use any browser. The script works exactly the same with Firefox or Edge too.

def test_switch_tab(self):
        driver = self.driver
        driver.maximize_window()

Next, we define a function “test_switch_tab”. Ideally, if you’re using a unittest library, start this function name with “ test ”. driver.maximize_window fires up Chrome instance in full-screen mode.

driver.get('https://www.lambdatest.com/')
time.sleep(5)

First line loads the LamdaTest homepage in our recently launched Chrome instance. time.sleep(sec) pauses the program from executing the next lines for specified seconds.

first_tab_handle = driver.current_window_handle
print("first_tab_handle : "+str(first_tab_handle))

We use the current_window_handle method of the driver to get & store the handle id for the active tab in a variable named first_tab_handle.

new_tab_link = driver.find_element_by_xpath('//a[contains(@class,"nav-link") and contains(@href,"selenium-automation")]')

On LamdaTest’s homepage, we find a link to the selenium-automation page using XPath.

action = ActionChains(driver)        action.key_down(Keys.CONTROL).click(new_tab_link).key_up(Keys.CONTROL).perform()

Next, we instantiate ActionChains and perform key_down, click, and key_up chained operations to open the LambdaTest’s selenium-automation webpage in a new tab. We’ll skip explaining the next few self-explanatory code lines that demonstrate that the driver control remains with the first tab by inquiring about the driver’s current_window_handle method.

driver.switch_to.window(driver.window_handles[1])
ctrl_click_tab = driver.current_window_handle

Here, we use the switch_to.window method and pass it the handle id of the new tab launched using ActionChains class as an argument. This switched driver control to the tab with selenium-automation LamdaTest’s webpage.

driver.execute_script('''window.open("", "_blank");''')

This line launches a new tab. It does get highlighted, but the control is still with the selenium-automation tab.

for handle in driver.window_handles:
if (handle == first_tab_handle) or (handle == ctrl_click_tab):
        print(handle)
else:
        js_tab_handle = handle

The above lines logically retrieve the handle id for JS triggered new tab and stores it in js_tab_handle.

driver.switch_to.window(js_tab_handle)

This line switches to the latest tab.

driver.switch_to_window(driver.window_handles[1])
driver.switch_to.window(driver.window_handles[-1])

We can also switch between tabs using window_handles indexes, negative index counts in reverse order from the last tab.

But it is a good idea to store ids in variables and switch tabs using variables just like the below line of code.

driver.switch_to.window(first_tab_handle)

This function gets automatically called after the test case gets executed and it shuts the driver.

def tearDown(self):
        self.driver.quit()

Output-

On successful execution of the above script, you shall see the following output –

How To Switch Between iFrames In Selenium Python?

Switching between iFrames is similar to switching between tabs. The difference is in syntax. Here, we have to use switch_to.frame()

We can switch between iFrames by locating the element using XPath or CSS Selectors, and we can also switch using the iFrame index.

To transfer driver control back to default content, use switch_to.default_content()

Switch Tabs Using Selenium Automation On LambdaTest Cloud

Using a cloud-based platform is the best way to leverage Selenium automation and get the desired results seamlessly. You can perform Python Selenium switch tab automation on LamdaTest’s cloud Selenium Gridto make the most of it.

To do so, you can obtain the value for username, access token, and gridUrl upon registering with LambdaTest. You can register here for free. Once you have the required information, you will need to declare your testing environment’s desired capabilities. LambdaTest’s Desired Capabilities Generator will provide you with the capabilities based on your choice of OS, browser & its version, resolution.

Execution-

  def setUp(self):
        username = "YOUR_LAMBDATEST_USERNAME"
        accessToken = "YOUR_LAMBDATEST_ACCESS_TOKEN"
        gridUrl = "hub.lambdatest.com/wd/hub"
        desired_cap = {
            'platform' : "win10",
            'browserName' : "chrome",
            'version' :  "67.0",
            "resolution": "1024x768",
            "name": "LambdaTest selenium automation switch tabs using python",
            "build": "LambdaTest selenium python switch tabs",
            "network": True,
            "video": True,
            "visual": True,
            "console": True,
        }
        url = "https://"+username+":"+accessToken+"@"+gridUrl 
        print("Initiating remote driver on platform: "+desired_cap["platform"]+" browser: "+desired_cap["browserName"]+" version: "+desired_cap["version"])
        self.driver = webdriver.Remote(
            desired_capabilities=desired_cap,
            command_executor= url
        )
        # self.driver = webdriver.Firefox()
        # self.driver = webdriver.Chrome()

This is the only function that needs to change when executing your script in the LamdaTest’s cloud Selenium Grid.

Conclusion

Cloud automation testing engineers get the flexibility and agility to uninhibitedly unleash their functional, acceptance, white-box, black-box, and regression testing drills on target web & mobile applications. While they do all this, switching between tabs might take up a lot of time. If you want to take your automation skills to the next level, start automating with Python Selenium switch tab automation and save a lot of manual effort.

Additionally, we recommend leveraging LambdaTest’s cloud-based platform is easy and cost-effective. With 2000+ operating systems & browsers to offer, there’s so much you can do with LambdaTest automation.

Happy Testing!

12 Common Web Design Mistakes To Avoid in 2021

codepoetn — Tue, 02 Feb 2021 07:10:18 +0000

It is no secret that the website is the backbone of every business. If you want your business to be successful in this COVID-19 era, you’ve got to have a well-designed website. As, due to social distancing, more and more potential customers are searching for information via the company’s website.

A well-designed website can help you grow your business as a flawless design creates a great impression on your potential customers inducing them to take the desired action. Common web design mistakes, however, can quickly derail even your best efforts. And while you hear a lot about what to do when designing your website. But do you know what not to do?

Well, to give you an edge, we have outlined 12 common website design mistakes that hurt many businesses. Avoid them while designing your website, and you should have more success in converting visitors.

What Is Web Design And Why It Is Important?

Before we cover these common web design mistakes in detail, it is crucial to understand what web design is all about. Web design is a process of iteratively strategizing, conceptualizing, and delivering information and overall business functionality in an aesthetically appealing layout.

Visual components of web design encompass the text content, images, videos, colors, fonts, different elements and shapes like buttons, forms, icons, the spacing between these elements, and the overall layout itself.

Design functionality comprises website speed, navigation, animation, user experience, user interaction, overall site’s tech architecture, SEO, cross-browser, cross-platform, cross-device design consistency, and responsiveness.

Now that we’ve covered web design and why it’s so important, it’s time to understand the common web design mistakes designers and developers must avoid in 2021.

12 Common Web Design Mistakes

We all know to err is human, but to avoid mistakes in the first place is divine. With that in mind given below are 12 common web design mistakes that you must avoid.

1. Not Opting For Design-Thinking Approach Before Implementation

One of the most common web design mistakes that most designers make is that they don’t realize the importance of design-thinking and drawing the layout on-paper. Designers often tend to “assume things” about users rather than carry out extensive “user research” to understand user needs. But this is not the right way to go about web design.

Understanding the design thinking approach is the key to designing addictive experiences for users. Not sure what design-thinking is – well, it is a process that understands and identifies customer needs and motivations. It’s a mindset to empathize with the customers, detail their problems, and build solutions to solve them.

The design thinking approach enables designers to identify goals, project scope, build business features, understand user requirements, technological capabilities, solution feasibility, and effectiveness. All this helps designers gather data-points to devise the right sitemaps and wireframes before hopping on to some designing software.

Remember – If you don’t understand your customers, you won’t be able to design good websites for them. So, be empathetic, and do user research to understand what your customers care about.

2. Not Prioritising Grids & Columns

We all know that the web design world is changing at a remarkable speed, and you need to change with it too. But some of the designers are still confined to developing designs the old way, i.e., organizing content by only using flexbox, float, breakpoints, etc., and overlook the importance of CSS grids and guides in developing responsive well-architectured websites designs. On the other hand, many junior developers have this misconception that flexbox and floats are dead. It’s a misconception. CSS grids, flexbox, floats, and breakpoints are all important from a web designer’s perspective, and using it in the right way can help avoid all grid & column related web design mistakes.

Using CSS technologies, designers can deliver a seamless user-experience where content gets automatically segmented and aligned using rows and columns. Grid-template-columns, minmax, autofit properties of CSS eliminates the need to use media queries breakpoints but using grid-template-areas does need to use breakpoints.

One of the CSS grid-related web design mistakes most designers tend to make is getting confused with CSS numbers. While designing for CSS frameworks like bootstrap, we count the number of columns in a row, usually 12, but in the grid system, we count lines or stacks. In the grid system, moving from lines 1 to 7 is akin to spanning 6 columns.

3. Not Strategizing Hierarchical Aesthetics

Another web design mistake that most designers need to avoid is not strategizing the visual hierarchy of content, including CTAs. Well devised user journeys can be efficiently implemented by designing efficient visual hierarchies. This can be achieved by using appealing words, colors, images, and small animations. Spacing between these elements and their size can also be very crucial in driving user engagement. Getting this wrong means less user interaction and can hurt your business profitability.

4. Not Prioritising Intuitive Navigation & Accessibility

Skipping the essential step of brainstorming, sitemap, and wireframing is the basis of several web design mistakes. One of the prominent ones being the poorly configured menu and navigation layout. An improper navigational structure can drive away your website visitors as it’s a pain to scroll through randomly structured websites. Suppose you’re designing a website with loads of pages, then it makes sense to group them into categories and arrange these categories hierarchically to enable users to navigate the website intuitively.

Moreover, navigation is not the same for every device. Though there are different ways to work with navigation, you need to choose the right strategy. For example, while working with mobiles, you can choose a hamburger menu strategy, as it works great for navigation on smaller screens. If you wish to compare the navigation of your website on mobile and tablets, you can use the LT Browser – A Responsive Design Checker Tool to do so:

Other than navigation, there are some other aspects to boost website accessibility. Research says there are 300+ Mn people with color blindness. But most designers overlook this aspect while designing websites and user journeys. There are millions of people with visual and hearing disabilities. Not taking these users in your design-thinking approach could be one of the major yet common website design mistakes.

Text size, color contrasts, page titles, image alternate text, keyboard accessibility, moving and blinking contents like carousels, ads, autoplaying videos, scrolling news feeds, and tickers are crucial components of a website from the accessibility point of view. A person battling hypermetropia might want to zoom the content on small devices. A person with visual impairment may prefer speech to consume content rather than text. A user with attention-deficit may want to pause carousels and so on. A good web design takes all this into the picture to enhance website accessibility. Doing it wrong can lead to a bad user experience and hurt your business. Given below is an example of an intuitive web design:

The above example of Amazon’s website shows how they have used the search functionality in the best way one can imagine. An easy-to-use site search functionality avoids the need to have labeling menu items built-in for a diverse set of users.

5. Not Adhering To Security-First, Responsive Design Approach

Though website security is much of a technical architecture-dependent aspect but to an extent, it is also related to website design and user journeys. How designers depict the user journeys greatly influences how developers implement the designs. If website security is prioritized right from the design stage, many security loopholes can be avoided. For example, putting the business-critical data behind authentication and payment walls.

Read our blog if you are curious about finding the influence of Microservice architecture in Security testing.

Besides security, the design must be responsive and consistent across browsers and devices to offer an omnichannel experience. One of the big web design mistakes in website development is designing different user journeys and roadmaps for different platforms and devices. The priority should be to maintain as much consistency across devices as possible. It would be better if you can check the responsiveness before making it live. Tools like LTBrowser from LambdaTest allows you to design responsive websites without any hassle.

6. Cluttering Up The Web Design With Too Much Content

Too little information and you run the risk of not delivering the solution your user is looking for. Too much information and you may end up building a solution that is hard to understand, consume, or access. In their sheer desperation, designers can overwhelm the visitors with resources and end-up delivering a highly cluttered website. Though it is successful because it’s highly popular since the early days. And maybe to maintain consistency for its users, they still haven’t changed the website design. But one should not make the same mistake.

One of the common web design mistakes to avoid is not building scalable designs from the very beginning. This is the core reason behind so many businesses revamping their website design. Unstructured, un-templated website designs are a growth bottleneck because, after a few hundred pages, it becomes erroneously difficult to maintain, develop, and scale these websites. To avoid these design scalability issues, the design approach should embrace a “divide and conquer” strategy.

Divide the overall website interface into different web pages like product listing, product information, user profiles, user interaction, etc. Next, divide each webpage interface constituents into reusable blocks and components. Each of these components should focus on delivering one functionality. For example, carousels, short user profiles, product descriptions, reviews, etc. Next, use these components to build the overall website. This approach ensures faster development and scalability of the webpages. Given below is an example of a cluttered and bad website design:

7. Not Having A Clear CTA

Not having a clear CTA is another common web design mistake. Websites are like marketing and sales funnel or pipeline. Your website visitor traverses within that funnel to go from the prospects’ stage to the converted clients’ stage. Not giving a clear “call to action” at the appropriate places may lead to not converting many hot prospects. Overdoing CTA may also lead to irritating prospects. You can learn about the 18 most effective CTA design tips to boost your website’s conversion rate.

8. Poorly Designed Or Irrelevant Images

We all know that images and graphics are a critical part of web design. When done well, images can clearly convey the message to the visitor. Done wrong, they can confuse the reader. Many businesses are still not paying attention to their images and are using low-quality and irrelevant images. Don’t make this mistake, as low-quality images will muck up your website and turn off your visitors, which will hurt your conversions. Similarly, irrelevant images will only confuse your visitors, inducing them not to take the desired action. That being said, you should also not clutter your website with too many images as they can take away the eyes from CTA, leading to a loss in conversions.

9. Not Paying Attention To 404 Page Design Can Hurt SEO

Web design is not just limited to developing layouts and user journeys. Wikipedia definition expands web design to incorporate content and search engine optimization (SEO). From the SEO point-of-view, multiple common website design mistakes can be easily avoided.

The first SEO-critical web design mistake is not to have a dedicated custom 404-page template. You can have a custom 404 page for your domain to present users with something relevant, or you may use 302 or 301 redirects to link to some other page on the web. Broken links on a website harm a business reputation. Users feel as if the website is a scam, and the product/service won’t be of standard. Using 302 or 301 redirects, these broken links could be easily handled. For an external website with broken links, you’ve to test, identify, and replace such links continuously.

Secondly, SEO-specific and common website design mistakes include not using title & heading tags. Using descriptive page text won’t be as impactful as describing it in the title. Similarly, using larger fonts won’t be as impactful for SEO as using h1, h2 tags.

10. Multimedia Related Web Design Mistakes

We already highlighted how irritating autoplay videos are, especially with sound. Additionally, it makes websites pretty slow to load. It’s often better to not autoplay videos and wait for some sort of user activity to trigger playing such videos. For example, the user scrolls to a section on your page containing the video.

We also underlined how fast carousels could be a turn off too. Other than these, there are a few more multimedia related web design mistakes that should be avoided.

First, a massive web design mistake is not to optimize your website images. Big size images make websites slow to load. If your website loads slow, it can hurt your conversions terribly. Did you know 1 in 4 visitors would abandon a website that takes more than 4 seconds to load? Even search engines don’t like such websites. So, as a designer, it is preferable to use clear and optimized images. As a developer, the attempt should be to lazy load these images. Lazy loading of images makes websites faster to load.
Second, avoid using cheap free stock images. Everyone has used them; everyone knows when you use one! It creates a cheap impression. So, if the free-stock image is not exactly spot-on, avoid using it.
Third, use contextual icons esp, favicons. We understand it’s an obvious thing, but a surprising number of designers don’t do this even in 2020. This helps in delivering the right message and boosts branding too.
Fourth, do not use several font styles on the same web page. Not maintaining the font’s style consistency across the webpage is another common web design mistake.

11. Not Designing Multilingual Voice Enabled Website Designs

Today it is possible to build websites in multiple languages and even add voice interface based functionalities. But not many designers and website owners are utilizing these web capabilities. If a business has customers in different countries, then to appeal better to target customers, websites can be developed in the native language. To boost accessibility, a voice-based interface can be added to the website. A big chunk of the google searches on phones is voice-based. Users are using voice technology to book cabs, hotels, etc. It would be a mistake not to count the voice and multilingual approach in the overall website design plan.

Keeping in mind the customers from different countries, you might be interested to know how your website may appear and work differently through different countries and continents and how to perform Geolocation cross browser testing through VPN on LambdaTest.

12. Not Harnessing Analytics Or Testing To Ensure Cross Browser Compatibility

The design, like content, is a creative work that can be improved iteratively. Using sophisticated analytics tools, your website analytics administrator can give you data on how users navigate your website. Also, analytics, testing can help you discover broken links. Based on the analytics input, you can find out the flaws in the user journey. You can identify what’s working and what needs improvements, which CTAs are getting clicked, which needs to be upgraded.

After completing the development phase successfully, keeping in mind all the website design problems and web design mistakes to avoid, we can proceed to the testing phase. Testing a website is an indispensable step as the world is filled with devices that are either different physically or from the inside. Cross browser testing, usability testing, and A/B testing are just a few to name as different goals demand different testing types.

One of the most common website design mistakes that developers tend to commit is assuming that a redesigned website is perfect and not performing browser compatibility testing as rigorously as they should. They feel that since the redesigned website has similar functionalities to the previous one, rigorous rechecking functionalities are meaningless. This, albeit, is not a good approach and is an unforgivable blunder in the redesigning part. With this mentality, a lot of things can go wrong, such as cross browser compatibility. Therefore, always test your website with equal commitment to optimize and make it bug-free for your audiences, thereby avoiding all related website design problems.

LambdaTest can help you identify and overcome such mistakes by allowing you to perform cross browser testing of a website on 2000+ browsers and their versions, with the help of VMs hosted on their cloud servers.

Over To You

A website could be your business’s most important asset, so you need to make it flawless to create a great first impression. But to do that, you need to avoid these web design mistakes.

Don’t worry. These common website design mistakes are fairly easy to avoid as well as fix. Identifying them is the hardest step. But now that you know these mistakes, you can easily avoid or fix them moving forward.

So, are you making any of these web design mistakes? Is there any other common website design mistake that you want to add to this list? Please, chime in the comment section below!

How To Drag And Drop In Selenium With Python?

codepoetn — Thu, 21 Jan 2021 10:12:44 +0000

Drag and Drop- one of the most beloved and commonly used gestures in the world of GUIs. Many actions are associated with drag and drop, including moving an object from one location to another to creating associations between them. Be it an image editing tool like Canva, a cloud-storage manager like Google Drive, or project planning & collaboration tools like Trello, Asana, Jira, drag, and drop functionality can be found everywhere.

You might have used it for positioning multimedia objects like text, images, video clips, etc., moving files to directories, and moving HTML elements/buttons within tables or between different pixel locations. Additionally, modern websites have started implementing sophisticated drag and drop captcha or bot detection. In all such applications and services, web developers and QA engineers face challenges in writing test cases for performing drag and drop in Selenium Python.

In this article, we’ll look in detail at how to perform drag and drop in Selenium with Python.

What Is Drag And Drop Operation In HTML?

Drag and drop is natively a graphical user interface (GUI) based software feature. The world wide web (w3) working draft HTML specifications, which declares standard practices for the modern web to promote interoperability and conformance, includes support for drag and drop operations for progressive web applications in desktop and mobile browser windows.

Basically, drag and drop is a chain of pointing device (mouse) events/gestures on GUI software applications (including web browsers). It involves –

Moving the cursor/pointer to where the object is located.
Clicking or pressing the pointer device (mouse) to grab the object of interest.
Moving the pointer device in a pressed state to the desired location.
Releasing the pointer device button to drop the grabbed object.

Drag and drop are sometimes also referred to as “click and drag,” “click and drop” and on touch-screen applications, its equivalent would be “long press, drag, and drop.”

Overview Of Python-Selenium WebDriver

Selenium Python WebDriver bindings is a simple open-source API based interface to automate web browsers like Firefox, Chrome, Edge, Safari, Opera, and several others. Using Python Selenium bindings, software testing engineers write automated functional or acceptance test cases and have access to all the features of Selenium WebDriver.

This is an overview of command line commands for Windows to install and start Selenium with Python:

pip install virtualenv (only if virtualenv is not globally installed on your system)

mkdir your_test_directory_name (create a directory for testing scripts if you don’t have one already. If you have a testing directory, skip this step.)

cd your_test_directory_name (move into your test directory)

virtualenv venv (create a virtual environment for your directory)

venv/scripts/activate (activate the virtualenv)

pip install selenium (install selenium within the activated virtualenv)

To download browser web drivers, hit the respective links for Chrome, Edge, Firefox, Safari. While developing scripts on the local system, to invoke these WebDrivers using Selenium-Python, you need to ensure that the respective web drivers are in the same directory or you have added PATH environment variables to their respective executables (.exe files).

Now, you’re all set to write and run your test scripts to drag and drop in Selenium Python WebDriver bindings inside a web browser.

How To Implement Drag And Drop In Selenium-Python?

We can implement drag and drop in Selenium Python with the help of ActionChains class. Selenium WebDriver APIs expose ActionChains class to automate low level user interactions with the website using a mouse, keyboard, etc. We shall use the same class to imitate and write test cases for drag and drop interaction using Selenium with Python.

What Is ActionChains Class?

Often for writing automated test cases, testing engineers have to perform mouse and keyboard operations; the ActionChains class comprises intuitive methods to perform these interactions. For instance, using ActionChains, we can implement clicking on HTML elements or double click on an object. We can even send keyboard keys, pause inputs, move cursor to a specific location, move mouse by the desired offset and obviously, we can perform drag and drop in Selenium Python.

The methods exposed using ActionChains –

click(), click_and_hold(), context_click(), double_click(), drag_and_drop(source, target), drag_and_drop_by_offset(source, x_offset, y_offset), key_down(value), key_up(value), move_by_offset(x_offset, y_offset), move_to_element(target_element), move_to_element_with_offset(target_element, x_offset, y_offset), pause(seconds), perform(), release(), reset_actions(), send_keys(keys_to_send), send_keys_to_element(element, keys_to_send)

Performing Drag And Drop Using ActionChains Class

In this article, we detail the drag_and_drop( source, target ) and drag_and_drop_by_offset(source, x_offset, y_offset) functions of ActionChains class. We will cover all other ActionChains methods in another article.

drag_and_drop(source, target)

This method accepts two arguments: source & target. As the name goes, drag and drop ActionChains involves first locating the “source” element, then dragging it to the target location and dropping it. To select a source and target element, you may use XPath or CSS Selectors.

drag_and_drop_by_offset(source, x_offset, y_offset)

This method requires three arguments: source, x_offset, and y_offset. drag_and_drop_by_offset is an alternative to using drag_and_drop. It involves identifying the source element and x,y offsets of the target location. After that, it drops the selected source to the desired offset location.

Performing chained click_and_hold(element), move_by_offset(xOffset, yOffset), pause(sec) and release() methods

click_and_hold(argument) method simulates the “left mouse button press and hold” operation. move_by_offset(x,y) resembles moving the cursor by specified x and y pixels on respective axes. Pause(sec) function pauses the action for a declared number of seconds. Release() method frees the remotely pressed mouse button.

Performing chained click_and_hold(element), move_to_element(target), pause(sec), move_by_offset(xOffset, yOffset) and release() methods

move_to_element(arg) is similar to moving the cursor to the specified argument. In our case, we’ll use these operations for drag and drop in Selenium Python by simulating click using click_and_hold, then dragging by using move_to_element or move_by_offset or combo, and by finally releasing, i.e., dropping the selected element.

Demonstration- Drag And Drop Using Python Selenium WebDriver

Here we’ll use “https://jqueryui.com/droppable/” and “https://jqueryui.com/draggable/” page to demonstrate the automation of drag and drop testing using Selenium – Python WebDriver bindings.

Demo for drag_and_drop(source, target) and drag_and_drop_by(source, xoffset, yoffset)

For demonstrating “drag_and_drop_by_offset,” we will use the “draggable” link, and to demonstrate “drag_and_drop,” we shall use the “droppable“ link. In the draggable link, we have a box that can be freely moved across its canvas. We have two boxes in the “droppable” link; we will move box one over box2.

A sample automation test script using Selenium with Python for dragging and dropping would look like this-

import unittest
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
import time

class DragTest(unittest.TestCase):

    def setUp(self):
        self.driver = webdriver.Firefox()

    def test_drag_drop(self):
        driver = self.driver
        driver.maximize_window()
        driver.get('https://jqueryui.com/draggable/') 
        driver.switch_to.frame(0)
        source1 = driver.find_element_by_id('draggable')
        action = ActionChains(driver)
        action.drag_and_drop_by_offset(source1, 100, 100).perform()
        time.sleep(5)
        driver.get('https://jqueryui.com/droppable/')
        driver.switch_to.frame(0)
        source1 = driver.find_element_by_id('draggable')
        target1 = driver.find_element_by_id('droppable')
        actions2 = ActionChains(driver)
        actions2.drag_and_drop(source1, target1).perform()
        time.sleep(5)
        self.assertEqual("Dropped!", target1.text)
        time.sleep(2)
    def tearDown(self):
        self.driver.quit()

if __name__ == '__main__':
    unittest.main()

Code Walkthrough

Let’s understand the script in detail –

import unittest
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
import time

We import Python’s inbuilt testing library “unittest” to write standard test cases. Next, we import “Python Selenium WebDriver bindings” to remotely control browser activity and automate interactions. We also explicitly import the “ActionChains” class from the Selenium WebDriver package, and lastly, we import “time” to invoke explicit pauses so that you can visualize the interactions. In production, you won’t need sleep time, at least not for this use-case.

class DragTest(unittest.TestCase):

We create a class DragTest, which extends on or, say, inherits the TestCase class of unittest.

def setUp(self): 
    self.driver = webdriver.Firefox()

A Python program or application can have multiple test cases, and they may have a repetitive set-up code. For example, configurations of intended browsers to test the application on. We can factor out such repetitive set-up codes by implementing them in setup() function. This function gets automatically invoked by the testing framework with every run of a new test. In our case, we are launching Selenium FirefoxDriver.

def test_drag_drop(self):
    driver = self.driver
    driver.maximize_window()

Next, we write the core logic of our automated test for drag and drop interactions. Here, we are creating a short reference variable “driver” for “self.driver”. And we invoke maximize_window() method of our driver to launch the browser in full-screen.

driver.get('https://jqueryui.com/draggable/')

get(url) method of the WebDriver, loads the specified url in the browser.

driver.switch_to.frame(0)

For your information, jqueryui[dot]com is using iframes to demo drag-and-drop functionality. WebDriver’s get_element_by_* (ID, name, css) method will identify the element after switching to our target iframe. Here we are switching to the target iframe by using the index parameter.

source1 = driver.find_element_by_id('draggable')

Now, we find the draggable element (inspecting the url, you’ll find the element has an id equal to “draggable.”

action = ActionChains(driver)

This creates an instance of ActionChains.

action.drag_and_drop_by_offset(source1, 100, 100).perform()

Now, we use drag_and_drop_by_offset(source, xOffset, yOffset) method to move the draggable element by 100 pixels on the x-axis and 100 on y-axis.

You may create multiple lines for dragging the draggable element based on test requirements.

time.sleep(5)

This is to pause the script execution for 5 seconds, just to visualize things. In headless browsers, we can ignore this line for faster drag and drop testing using Python Selenium WebDriver.

   driver.get('https://jqueryui.com/droppable/')
        driver.switch_to.frame(0)
        source1 = driver.find_element_by_id('draggable')
        target1 = driver.find_element_by_id('droppable')
        actions2 = ActionChains(driver)
        actions2.drag_and_drop(source1, target1).perform()
        time.sleep(5)

Similarly, for the drag_and_drop(source, target) method, we first load the required url in the browser, switch to the target iframe using the index, identify the source element, i.e., the element which needs to be dragged. And the target element, i.e., the target location where the draggable element needs to be dropped. Lastly, we create a stance of ActionChains and invoke drag_and_drop(src, dest) method. perform() function carries out all the chained interactions.

If the test case executes successfully, you shall see this output on your computer screen –

click_and_hold(element), move_to_element(target), pause(sec), move_by_offset(xOffset, yOffset), release()

To demonstrate drag and drop in Selenium Python using the above methods, we need to write another test with modifications in the test_drag_drop(self) function.

def test_drag_drop(self):

        driver = self.driver
        driver.maximize_window()
        driver.get('https://jqueryui.com/draggable/')
        driver.switch_to.frame(0)
        source1 = driver.find_element_by_id('draggable')
        action = ActionChains(driver)
        action.click_and_hold(source1).move_by_offset(150, 100).pause(2).move_by_offset(-10, -10).release().perform()
        print("Dragging & dropping test case successful\n")
        time.sleep(5)
        driver.get('https://jqueryui.com/droppable/')
        driver.switch_to.frame(0)
        source1 = driver.find_element_by_id('draggable')
        target1 = driver.find_element_by_id('droppable')
        actions2 = ActionChains(driver)
actions2.click_and_hold(source1).move_to_element(target1).pause(2).move_by_offset(20, 20).release().perform()
        print("Dragging & dropping test case successful\n")
        time.sleep(5)
        self.assertEqual("Dropped!", target1.text)
        time.sleep(2)

Code Walkthrough

Let’s understand how it differs from the earlier code –

action.click_and_hold(source1).move_by_offset(150, 100).pause(2).move_by_offset(-10, -10).release().perform()

Here instead of using drag_and_drop_by_offset(), we simulate the same set of interactions using chained methods. We have first identified the draggable element on the jqueryUI page, remotely clicked on it, moved it by 150 pixels on the x-axis and 100 on the y, paused for two seconds, and again moved the clicked element by 10 pixels in the negative x,y direction. Finally, dropped the element.

actions2.click_and_hold(source1).move_to_element(target1).pause(2).move_by_offset(20, 20).release().perform()

Similar to the above one, we execute the same set of chained operations. The difference is that this time we locate a target droppable element and drop our clicked element on it by using move_to_element and release. We again used the move_by_offset here to adjust the position so that the asserted message “dropped!” is visible.

Using Scalable Automation Testing On Cloud

To carry out automated tests in a highly scalable manner on a wide number of browsers and operating system environments, you can use LambdaTest’s automated cross browser testing solution on the cloud.

To execute the above script on LambdaTest, we need to modify setUp() function to the following –

def setUp(self):
        username = "your_lambdatest_username"
        # Register on lambdatest, if you’ve not already. It hardly takes 30 seconds to 2 minutes to get started.
        accessToken = "your_lambdatest_accessToken"
        # You can find access token post registration on your LambdaTest profile page.
        gridUrl = "hub.lambdatest.com/wd/hub"
        desired_cap = {
            'platform' : "win10",
            'browserName' : "chrome",
            'version' :  "67.0",
            "resolution": "1024x768",
            "name": "LambdaTest python selenium drag and drop test ",
            "build": "LambdaTest python selenium drag and drop actionChains",
            "network": True,
            "video": True,
            "visual": True,
            "console": True,
        }
        # Desired capabilities dictionary specifies details of the testing environment. Manipulate this  dictionary to cross-test on multiple browsers and OS’s.
        url = "https://"+username+":"+accessToken+"@"+gridUrl 
        print("Initiating remote driver on platform: "+desired_cap["platform"]+" browser: "+desired_cap["browserName"]+" version: "+desired_cap["version"])
        self.driver = webdriver.Remote(
            desired_capabilities=desired_cap,
            command_executor= url
        )

Registration and setup have been explained in this JavaScript alert handling with Selenium article.

The above script, when executed in LambdaTest cloud and under specified desired capabilities, yields –

Wrapping Up!

We hope you are all set to start dragging and dropping without any manual effort. The best part is that you need not worry about maintaining environments and browser versions. Just focus on the crucial part, i.e., writing the test cases using a manageable cross browser testing environment provider like LambdaTest. Not to mention, cross browser testing using Selenium WebDriver by self hosting in the cloud is a cost-ineffective and resource-intensive process.

Using a cloud-based platform like LambdaTest takes away all Ops pain and enables automation testing engineers to do what they do the best- write the application testing scripts and automate the cross browser testing process on over 2000+ browsers on the cloud.

We hope that this post convinces you to try this drag and drop gesture. And if you did find it valuable, we’ll be grateful if you could share it on your LinkedIn or Twitter. Remember, sharing is caring!

Happy Testing!

Top 10 CI/CD Pipeline Implementation Challenges And Solutions

codepoetn — Tue, 19 Jan 2021 10:19:31 +0000

CI/CD pipelines have become the mainstream approach to software development across the entire IT sector. There’s no doubt that CI/CD pipeline tools have matured a lot over the years. Yet, developers, QA engineers, and leaders are still posed with some challenges and roadblocks in adopting and efficiently implementing CI/CD tools. This article highlights the top 10 CI/CD challenges that people face during implementation, and we will also discuss their potential solutions.

Let’s get started with the basics!

What Is A CI/CD Pipeline?

Traditionally, the software was developed using waterfall methodology but recently, agile and lean have started dominating the software development space. Today, DevOps practices play a crucial role in enabling this agile software development approach. To dive deeper into these methodologies, refer to our Agile Vs Waterfall methodology comparison.

Continuous integration & continuous delivery, i.e., CI/CD pipeline tools, technologies, and stages, are the pillars on which DevOps culture is architected. These are tools and technologies that eliminate the need to manually integrate different dependencies or manually test the code-base for security & design loopholes. CI/CD approach instead automates the entire operations process from integration to delivery, testing, and deployment.

What Is Continuous Integration?

Continuous Integration (CI) is the kickoff step of CI/CD pipeline stages.

What does that mean?

When software is developed iteratively, development teams frequently code, build, test, release, and deploy features. Continuous Integration is all about automating this process by setting up a script-led mechanism to detect a change in the shared code repository automatically. Changes can be detected using polling, periodic monitoring, or using a push-out mechanism like webhooks.

As soon as the change is detected, your CI solution automatically pulls up a copy of your updated code, builds it, carries out unit testing, and performs dependency compatibility checks to detect code loopholes at an early stage.

Continuous Integration (CI) can be implemented using open source tools like Jenkins or Continuous Integration SaaS services like Gitlab CI, Circle CI, or Codeship.

What Is Continuous Delivery?

Continuous Delivery (CD) stage of the CI/CD pipeline augments the benefits of continuous integration (CI) by expanding the scope of automation testing beyond unit testing.

Testing is not an inherent part of continuous integration. Still, DevOps teams prefer practicing unit testing at the integration level to identify code bugs and make the application more robust. Continuous Delivery incorporates automated load testing, API testing, integration testing, etc., besides unit testing.

The pulse of Continuous Delivery lies in automating the entire software release cycle by triggering automated flows for building, testing, and staging code updates as soon as it surpasses continuous integration (CI). The CI/CD pipeline’s direct benefits are in pushing validated, secure, robust, and deployment-ready applications at a faster pace to the staging or pre-production environment.

What Is Continuous Deployment?

Continuous Deployment (CD) further expands the scope of continuous integration and continuous delivery. Continuous deployment is the final stage in a CI/CD pipeline process. Continuous deployment is a test-driven approach to validate the application on different parameters and automatically roll out deployments.

A robust continuous deployment implementation incorporates continuous monitoring and alert features to automatically transition back to previous versions of deployment if any issue arises. There are also certain continuous deployment challenges that need to be addressed carefully. We will discuss these issues later in the next sections.

What Is Continuous Testing?

Be it integration, delivery, or deployment – testing has been an integral part of all the CI/CD pipeline stages. Continuous testing is an approach to automate the application testing process and embed it into the CI/CD pipeline to achieve greater agility.

Different types of automated testing can and should be implemented at different CI/CD pipeline stages, making it easier to overcome CI/CD challenges. For instance, unit testing is more suited at the continuous integration stage of the CI/CD pipeline. Unit testing at this stage typically involves testing and validating code in isolation, i.e., independent of any other code. Integration testing, functional testing, and acceptance testing could be part of the continuous delivery and continuous deployment stage of the CI/CD pipeline.

Common CI/CD Challenges (Including Continuous Deployment Challenges)

Adhering to the CI/CD approach of agile software development is not always a cake-walk. Having understood the CI/CD pipeline terminologies and overall flow in detail, let’s now acquaint ourselves with some common CI/CD challenges –

1. Limited Environment Challenges

Software development teams, especially testers, often get only limited infrastructure resources to test their code. In such scenarios, teams tend to incline towards a shared testing environment.

Shared testing environments are not always that smooth an experience with CI/CD pipeline. There are a lot of continuous deployment challenges associated with it. Several developers and teams (if the project is way too large) are concurrently committing code to the same CI environment. Sometimes, several parallel testings are in process. This could branch into environment configuration issues as different tests might need different environment configurations.

In fact, more than often, the poor configuration of the shared testing environment translates into failed tests & failed deployments in-turn. This dilutes the very purpose of the CI/CD approach, i.e., faster iterative development.

A solution to this could be on-demand or on-need-basis dedicated testing environment creation in the cloud. LambdaTest’s Selenium automation testing features could bring relief to testing teams facing CI/CD challenges like limited testing environments or inefficient implementation.

2. Ownership-Based CI/CD Challenges

Often bugs and code errors are identified at a later stage of the DevOps release cycle. Sometimes, CI/CD pipeline even fails or breaks down due to these bugs. Failing pipelines are normal. It is designed to break if all the code is not integrable and if the code is not securely performing its intended functions.

But poor CI/CD pipeline implementation often makes it a cumbersome task to identify failure cause immediately. This, in turn, makes it harder to redirect to the concerned teams for fixing code errors.

A quick fix to this CI/CD challenge is to ensure that code and test-cases are written with easily identifiable logging capabilities. Assign ownership roles to individuals or teams for each stage of the CI/CD pipeline. Based on the failure log analysis, these individuals will be responsible for figuring out the failure cause, identifying, and redirecting the team responsible for fixing the continuous deployment challenge.

3. Implementing Multiple CI/CD Pipelines For Large Scale Projects

In big enterprises, several large scale projects are parallelly under development and maintenance. And multiple development teams are incrementally committing changes to the respective code repositories. So if issues get introduced in the commit, compile, build, test, deliver, deploy cycle, it is often tough to analyze it and get to the root cause.

This is one of the major CI/CD challenges when it comes to enterprise-level organizations. As a solution, teams can have standard CI/CD pipeline templates across the organization and break down complex, massive projects into smaller modules. This enables meaningful reporting and fastens up feedback cycles for improving code and fixing issues.

4. Integrating Security Tools

In a study by 451 Research, more than 60% of respondents said a lack of automated, integrated security tools is a big challenge in implementing CI/CD tools effectively.

Security tests like static application security test (SAST), software composition analysis test (SCA), and dynamic application security test (DAST) are deployable at different stages of the CI/CD pipeline on need-basis.

SAST & SCA are responsible for ensuring security tests at the CI stage and taking care of pre-commit checks and incremental tests at commit and build stages of the CI/CD pipeline. DAST & IAST are responsible for fuzz testing, pen-testing, hardening, etc.

The security challenge highlighted by 451 research is an inefficient security implementation and sometimes misleading information in terms of “false positives.” These issues could be resolved by properly identifying which security testing tool best fits in with your remaining CI/CD tools. The tools must be configured to automatically update the defect tracking system, break the build if it identifies crucial security threats, and update the metrics monitoring dashboard. This would enable responsible teams to act immediately on the identified threats and overcome a major continuous deployment challenge.

5. Coordination-Based CI/CD Challenges

CI and CD are often implemented separately by teams, and the tools and processes need to be compatible with incremental feedback-led processes.

Apart from tools in the continuously iterative development, poor communication across business and product teams also leads to delayed-release and deployment cycles. One of the big benefits of the CI/CD pipeline is accelerated delivery and deployment cycle, but lack of coordination fails the use-case. In large projects, companies have critical data and software in databases and on servers.

When the build or test-cases fail, teams responsible for addressing failed builds don’t have access to these critical resources for obvious security reasons. But these challenges can be addressed with proper coordination among teams and automated processes.

6. Cost & Resource Management

Implementing CI/CD across the organization has long-term benefits in business agility, product robustness, security, and feature release cycle, but it also has associated costs. The resources, tools, and infrastructure requirements significantly add up to the project costs.

Besides, everyone has their own preference for tools and other resources as per their convenience. Also, adopting CI/CD doesn’t always mean better agility. It can potentially slow down processes and deter dev productivity if proper guidance and training are not available to developers and executives.

7. Implementing CI/CD Into Ongoing Projects & Workflows

Going agile, adopting, and implementing CI/CD pipelines to existing workflows and projects is not an easy task either. Especially in large scale legacy projects and workflows, changes to any part might need changes across several other processes and workflows.

This inevitably requires extreme caution, in-depth knowledge, and rich experience with CI/CD tools as the stakes in terms of costs, latency, and quality are quite high.

Companies and teams should impartially evaluate if they really need CI/CD and if it would augment their processes and development approach. If the answer is yes, they should evaluate feasibility too in terms of costs and infrastructure resources.

8. Training, Cultural & Other Internal Resistance

Developers normally don’t enjoy doing operations tasks, but in CI/CD approach, developers often need to intervene and get involved with configuring VMs and other environments.

As CI/CD tools are relatively new in the market, there is not much expertise and training available, which again is a challenge as poor CI/CD implementation would add up costs and risks.

Also, companies face internal resistance from developers, team leads, and other project stakeholders as implementing CI/CD is a new approach for them and pushes them out of their comfort zone.

9. Inefficient Implementation Of CI/CD Pipelines

Lack of expertise, poor training, and several other challenges could lead to the inefficient implementation of CI/CD pipelines. Teams are seen automating wrong processes, writing flawed test cases, configuring CI in a wrong way, and even mistaking between continuous delivery approach and continuous deployment concept.

For instance, automated deployment need not be triggered with each successful delivery because there can be several commits a day. You cannot release 10 versions of a product for users on the same day or even over weeks. This is another major continuous deployment challenge that needs to be resolved at the earliest. The delivery stage is to always be in a deployment-ready state. The deployment stage is more of a business decision.

10. Continuous Testing & Optimization

Poorly written unit tests and acceptance tests could be a bottleneck to feedback-led iterative software development. However, it is more of the testing team’s internal problems rather than CI/CD challenges. But solely focusing on functional tests is a bad continuous testing practice for CI/CD pipelines. Test cases should also be written for non-functional requirements like performance measuring & reliability tests.

Performance features could be very critical in banking and healthcare applications. Writing test cases for performance tests & reliability tests are not as straightforward as testing functional requirements. These also need large testing environments to test application scalability, reliability, and various test-failure scenarios.

How LambdaTest’s Integration In Your Pipeline Will Resolve CI/CD Challenges?

LambdaTest is a cross browser compatibility testing tool. It enables you to interactively test your web and mobile applications on all major browsers for different mobile operating systems like Android, iOS, and desktop environments like Mac, Windows, etc.

LambdaTest provides you out-of-the-box automated testing solutions to easily integrate with a suite of applications, from bug logging to project management tools & dashboards. Also, as already mentioned, LambdaTest integrates with CI tools of your choice to make automated testing a seamless experience for you.

One of the best ways to overcome the most common CI/CD challenges is using cloud-based automation testing platforms that allow easy integration with CI/CD tools. For example, LambdaTest offers you a suite of automation testing services in the cloud to test your software across 2000+ browsers & devices using a cloud Selenium Grid.

That Is All!

To conclude, most of the CI/CD challenges are related to poor practices and poor implementation. Properly evaluating CI/CD requirements and choosing the right tools, correctly configuring CI/CD pipeline stages, and rightly training the concerned professionals will lead to a successful CI/CD implementation. So you as an organization could focus more on shipping features than on controlling operations.

Utilize the power of Automation, leverage Automated testing.

How To Take A Screenshot Using Python & Selenium?

codepoetn — Wed, 21 Oct 2020 10:01:39 +0000

The goto software framework for any web developer looking for an open-source, free test automation tool is Selenium. It is used with various programming languages, including Java, Python, PHP, Perl, and C#. Selenium can also be used as a web-scraping tool or to create a human-replica bot to automate social-media or even test PDF files ! Geeks at Google & Thoughtworks are highly credited for its development and maintenance.

In this Python Selenium screenshot tutorial, we are going to explore different ways of taking screenshots using Selenium’s Python bindings. Before we hop-on to capturing Python Selenium screenshots, let’s first acquaint ourselves with Selenium Python bindings.

What Is Selenium Python Bindings?

Seleniumhas different components; we have Selenium WebDriver, Selenium IDE, and Selenium Grid. Selenium Python bindings is an API interface to use Python with Selenium WebDriver for writing functional/acceptance tests. We shall be using these Python bindings for Selenium to capture full page screenshots, HTML element-specific screenshots and save it in our desired location.

Installing Dependencies

Before we learn how to use Selenium Python for taking screenshots, we need to install some dependencies. Below is a list of all that you need in your machine-

Python
Pip
Selenium Python bindings
GeckoDriver
ChromeDriver

For learning how to use Selenium Python, you must have Python & pip installed on your system or server. Python comes pre-installed with Linux & Mac systems. For Windows, you may download the Python installer from here.

Note: Python 2 is redundant now. So, if your Linux or Mac system is having the older version, you may consider updating them to the latest stable versions.

You would also need pip installed on your system.pip is a tool or a package manager tool for Python and it comes pre-installed with the latest versions (as you can see in the image above). You can check if it is existing in your system by running following command in the command prompt-

pip help

If you get a response like below from pip, you are good to go.

If it displays something like this-

Then you have to download this get-pip.py file to any location in your system, but you should have the path to the file. Remember, you only have to do this if pip is not installed in your system.

Next, run this command to install pip.

python get-pip.py

If you aren’t in the directory as that of the downloaded file, replace the file name in the command given above with the full path to the file location.

Now try the command pip help again, you should see the screen we shared earlier.

Next, we install Selenium Python bindings using pip. Then, you will have to run this command-

pip install selenium

This installs Selenium’s Python bindings in your system. Alternatively, if you don’t like this installation mechanism, you may first download the Selenium-Python source distribution from Pypi. Unarchive it. Once you do this, run the following command to install the bindings –

python setup.py install

Again, remember you only need this if you don’t want to install using pip. Also, if you are not in the same folder where you have archived the downloaded Selenium Python bindings then replace setup.py with full path to setup.py.

Next, we need a driver to proceed with clicking Python Selenium screenshots of webpages.

You can choose any browser of your choice, and you can download the drivers from the following links :

Now let’s make a trial file named check_setup.py. Write the following code in it –

from selenium import webdriver browser = webdriver.Firefox() browser.get(“https://www.lambdatest.com/”)

This should fire-up a Firefox instance and automatically load the LambdaTest homepage. If this worked for you, we’re all set to capture Python Selenium screenshots of websites.

Capturing Screenshots Using Python & Selenium

I hope that now you have all the dependencies installed and know how to use Selenium Python, it is time to get to the good part. In this section, we will see how to take a Python Selenium screenshot for any web page. We will see instances for both GeckoDriver & ChromeDriver. First, let’s see how to use Selenium Python with GeckoDriver or Selenium FirefoxDriver.

Using get_screenshot_as_file() with GeckoDriver For Python Selenium Screenshots

from selenium import webdriver 
from time import sleep 
browser = webdriver.Firefox() 
browser.get(“https://www.lambdatest.com/”) 
sleep(1) 
browser.get_screenshot_as_file(“LambdaTestVisibleScreen.png”) 
browser.quit()

If you would like to store these images in a specific location other than the project directory, please specify full path as the argument to get_screenshot_as_file.

Code Walkthrough:

Let’s understand what we are doing here.

from selenium import webdriver – This line imports the WebDriver which we use to fire-up a browser instance and use APIs to interact with web elements.

from time import sleep – This line imports the sleep function from Python’s ‘time’ module. This accepts integer arguments which equals the number of seconds. The script waits for the specified number of seconds before executing the next line of code.

browser = webdriver.Firefox() – This line is equivalent to saying, use the keyword ‘browser’ as you would use ‘webdriver.Firefox()’.

browser.get(“https://www.lambdatest.com/”)

This fires-up a Firefox instance controlled by a Selenium driver and fetches the URL specified as an argument to get(argument) function.

sleep(1) – This halts the script from running for 1 sec. This step is often required when there are animations on the page or when you explicitly want to wait for a while so that some actions can be performed or pages can load fully.

Note: Selenium WebDriver by default waits for the page to load completely before executing the next line of script or operation. But in some advanced JavaScript rendered websites, we may need to use ‘sleep’ for manually pausing the script for a while so that animations and the page itself is fully loaded.

browser.get_screenshot_as_file(“LambdaTestVisibleScreen.png”)

This finally clicks the visible section of the webpage in the launched Firefox instance and saves the screenshot with specified name and extension.

browser.quit()– Lastly, the browser needs to be closed and this line does the same.

Using save_screenshot() with GeckoDriver For Python Selenium Screenshots

This is the easiest way to save the full page screenshot. Just replace the get_screenshot_as_file command with save_screenshot, as displayed below-

browser.get_screenshot_as_file(“LambdaTestVisibleScreen.png”)

becomes

driver.save_screenshot(‘your_desired_filename.png’)

Next, we will see how to use Selenium Python to capture screenshots with the help of Selenium ChromeDriver.

Using screenshot() With ChromeDriver For Python Selenium Screenshots

‘save_screenshot’ function works with ChromeDriver, but to propose an alternative solution, we will also show you how to use the screenshot function to take a full-page screenshot. Here is the script-

from selenium import webdriver 
from time import sleep 
from selenium.webdriver import ChromeOptions 
options = ChromeOptions() 
options.headless = True 
browser = webdriver.Chrome(chrome_options=options) 
URI = “https://www.lambdatest.com/” 
browser.get(URI) 
sleep(1)
S = lambda X: browser.execute_script(‘return document.body.parentNode.scroll’+X) browser.set_window_size(S(‘width’), S(‘height’)) 
browser.find_element_by_tag_name(‘body’).screenshot(‘LambdaTestFullPage.png’) browser.quit()

Code Walkthrough:

Let’s understand what we are doing here. First of all, in this example, we are using ChromeDriver. Earlier we had used a GeckoDriver for using Firefox as a browser. More or less, the other functionalities are the same.

from selenium.webdriver import ChromeOptions

We import ChromeOptions to set the browser as headless so that it runs in the background. We could have directly used webdriver.ChromeOptions, but to make it more understandable we split it into a separate line of code.

options = ChromeOptions() 
options.headless = True 
browser = webdriver.Chrome(chrome_options=options) 
URI = “https://www.lambdatest.com/” 
browser.get(URI)

Here we use the newly set ChromeOptions and pass it as parameter to the webdriver’s Chrome function. Observe, previously we used “Firefox()”. “Browser.get” launches the instance and fetches the URI.

S = lambda X: browser.execute_script(‘return document.body.parentNode.scroll’+X) browser.set_window_size(S(‘width’), S(‘height’))

The first line is a lambda function to find the value of X. We get the value by executing DOM JavaScript functions. The second line is to resize the window.

browser.find_element_by_tag_name(‘body’).screenshot(‘lambdaTestFullPage.png’) browser.quit()

Finally, we track down the body element of the webpage by using the driver function find_element_by_tag_name and pass “body” as parameter. You could also use find_element_by_id, find_element_by_xpath to locate the element.

We used a ‘.’ operator nested screenshot() function in the same line to capture the full page screenshot. Lastly, we terminate the Chrome instance using browser.quit().

Capturing Python Selenium Screenshots Of A Particular Element

We now demonstrate how we can use the save_screenshot() function to capture any element on the page, say a button or an image or a form, anything. We shall use Python’s PIL library which lets us perform image operations.

We shall capture a feature “section” element on LambdaTest website with following XPath – “//section[contains(string(),’START SCREENSHOT TESTING’)]”

The final script would be :

from selenium import webdriver 
from time import sleep 
from PIL import Image 
browser = webdriver.Chrome() 
browser.get(“https://www.lambdatest.com/feature”) 
sleep(1) 
featureElement = browser.find_element_by_xpath(“//section[contains(string(),’START SCREENSHOT TESTING’)]”) 
location = featureElement .location 
size = featureElement .size 
browser.save_screenshot(“fullPageScreenshot.png”) 
x = location[‘x’] 
y = location[‘y’] 
w = x + size[‘width’] 
h = y + size[‘height’] 
fullImg = Image.open(“fullPageScreenshot.png”) 
cropImg = fullImg.crop(x, y, w, h) 
cropImg.save(‘cropImage.png’) 
browser.quit()

This script when executed would save the cropped info-element from LambdaTest website as cropImage.png.

Code Walkthrough:

from PIL import Image

This line imports the Image module from PIL library of Python.

featureElement = browser.find_element_by_xpath(“//section[contains(string(),’START SCREENSHOT TESTING’)]”)

This line locates one of the features on LambdaTest website using XPath (as you can see below.)

location = featureElement .location 
size = featureElement .size

First-line fetches the vertical and horizontal start location of the feature-element. Second line gets the width and height of the element.

We store these in ‘x’, ’y’, ’w’, ‘h’ variables respectively.

fullImg = Image.open(“fullPageScreenshot.png”) 
cropImg = fullImg.crop(x, y, w, h) 
cropImg.save(‘cropImage.png’)

We first open the image and store bytes in a “fullImg” variable. Next we crop it using the x,y,w,h parameters we calculated.

Lastly, we save the cropped image.

This should be the output that you will see after the successful execution of the code-

What Role Do Screenshots Play In Test Automation?

Automated screenshots could help in easy identification of the bugs and faster doing it all manually. Most importantly, it can be as scalable as the application you are testing without requiring extra testers. A direct implication of all above is – automated screenshots are a cost-effective and time-efficient process.

Additionally,

It’s always a better alternative to manually opening the websites in different browsers and saving the images.
For responsive applications, which need to run across devices and have many different themed pages and components, taking screenshots makes sense.

Other Options To Take Python Selenium Screenshots

If you would rather use other ways to capture Python Selenium screenshots, you can also use this libraryto take screenshots. For installing it, execute the following command.

pip install Selenium-Screenshot

Example to Capture Full-Page Screenshot:

from Screenshot import Screenshot_Clipping 
from selenium import webdriver
ob=Screenshot_Clipping.Screenshot() 
driver = webdriver.Chrome() 
url = "https://www.google.com" 
driver.get(url) 
img_url=ob.full_Screenshot(driver, save_path=r'.', image_name='google.png') 
driver.quit()

Why Selenium & Python Are Well-Suited For Capturing Screenshots?

Selenium and Python are the goto choices when it comes to Selenium test automation. And this is not just limited to capturing screenshots, there’s a lot more you can do using this awesome combination. Let’s find out why-

The learning curve is very small for Selenium Python bindings as the language itself is very easy and intuitive to start with.
We can use it with multiple browsers including the popular ones.
The number of lines of code you need to write in Python is far less than compared to other languages.
Strong community support.
Faster & efficient execution.

Wrap Up!

In this tutorial, we learned about using Selenium and Python to capture screenshots of web pages. This is essentially the best way to catch bugs efficiently and save your team a lot of time. The best way to perform cross browser testing is to compare how the web pages are rendered over multiple browsers or devices.

You can use a cloud-based platform like LambdaTest to capture your website’s screenshots or a particular web page without going through the trouble of writing the code. You can do this on a selection of 2000+ browsers and operating systems over a Selenium Grid cloud. We hope these tools will come in handy when you are not in the mood to write all that code but just want to hunt some bugs!

If you have any issues or questions don’t hesitate to reach out via the comment section.

Happy testing!