DEV Community: Deeksha Agarwal

Progressive Web Application: Statistics- Infographic

Deeksha Agarwal — Thu, 21 Apr 2022 14:39:19 +0000

We love PWAs and seems like so do you 😉 That’s why you are here. In our previous blogs, Testing a Progressive web app with LambdaTest and Planning to move your app to a PWA: All you need to know, we have already gone through a lot on PWAs so we decided to cut is short and make it easier for you to memorize by making an Infographic, all in one place. Hope you like it.

Note: Session history management - The pushstate() and replaceState() methods of the history object are used to manipulate the browser’s session history.

Note: seamless attribute for iframes - The seamless attribute allows the contents of iframe elements to flow into regular ancestor elements. Since the content is rendered by the browser, it is subject to all of the usual browser quirks and CSS styles that affect resolution or layout.

Share this Image On Your Site

Please include attribution to www.lambdatest.com with this graphic.

Note: naturalWidth & naturalHeight image properties - The img-naturalwidth and img-naturalheight properties describe the intrinsic width and height of an image, as determined by its media type.

<a target="_blank" href='https://www.lambdatest.com/blog/progressive-web-application-statistics-infographic/'>
  <img src='https://www.lambdatest.com/blog/wp-content/uploads/2018/04/PWA-1.jpg' alt='Progressive Web Application: 
   Statistics' 540px border='0' />
</a>

What Is Cross Browser Compatibility And Why We Need It?

Deeksha Agarwal — Wed, 20 Apr 2022 10:41:19 +0000

Last two decades have seen a tremendous increase in the web. In 1998 there were around 2.4 Million websites, now there are around 1.8 billions. An that is exactly an increase of 74900%. Not just this, the number of internet users have shot up by 2727% from 147 million in 1998 to 4,157 millions in 2018. The number of mobile users back in 1998 were 318 millions whereas in 2018 it’s 7740 millions. A straight advancement of 2333%.

There is so much content on the web that multiple lifetimes would not be enough to go through it all. You can find everything starting from how to cook an omelette to how to make an airplane. Like every damn thing! And people are viewing this content on more than 3000 different types of web enabled devices.

That’s what we are concerned about.

More users, more devices, more platforms, more browsers and ultimately more ways in which your website can be viewed. So, your major concern should be do your users (who are browsing your website on thousands of distinct devices) see your website the same way you want them to see?

The growth in web also resulted in multiple different types of technologies to build this web ecosystem, and a significant diverse tools, like web browsers, to access and interact with this content. Unfortunately, not all technologies are mutually compatible with each other. A web developer would always need to make sure that their website is compatible with every technology hence the need for browser compatibility testing.

Once the users face some problem, they will leave your site and will never come back. So, yes! Cross browser compatibility is quite a needful thing.

‘Other browsers’ demand for the need of cross browser testing

Most developers have a favorite browser, and I will name this condition “Browser Bias”. Usually this favorite browser is the top version of chrome or firefox. They develop and debug the whole product on that browser. But the major thing that needed to be kept in mind is ‘We are not our users’. Our users can be anyone and they might be using any browser. We cannot let our bias towards a browser or a browser resolution affect our product. It is entirely possible that browsers that we respectfully ignore while developing can be a favorite browser to our target users.

Granted that latest 2–3 versions of chrome would have the highest coverage. But even that coverage is not 100%. You cannot not develop for the rest of the users. It’s just not good design.

Latest global stats show that Chrome, Safari, and UC browsers are the top 3 browsers in 2018 but again, this statistics is a little misleading because in different areas people prefer different browsers.

Say for example, In Japan The top 3 browser include Chrome, Safari, and IE with safari holding 25% market share on all device types compared to the global share of 14.4%.

Similarly, when we look at the statistics of Germany we’ll find Chrome, Firefox and Safari competing for the race of top 3 browsers.

Also, in countries like Cuba Android browser bags the position in top 3 browsers so, this statistics shows that you can’t even rely on the top browsers in order to find out the most used browser. This is quite dynamic and dependent. Some prefer chrome, some prefer firefox, safari, IE and many gives the first preference to mobile browsers.

Mouthful of data to digest?

On the top of it, various browsers comes with various features.

For example, placeholder, the attribute in HTML isn’t supported by even the latest versions of IE and Edge however chrome and Firefox lovingly accepts that.

Similarly WebM video format isn’t supported in the one of the widely used browsers, Safari along with Edge and iOS Safari.

When used, these may cause bug to peek into the other web browser that you not find important.

So, don’t decide for yourself what will work, Let the data speak for you. You can also use various analytics tools like Google analytics, kissmetrics, etc to gather different type of data like your traffic source, the most liked browsers by your audience, and a lot more to that. So, don’t assume anything as preferring data over bias is what will help you in winning.

This certification is for anyone who wants to stay ahead among professionals who are growing their career in Selenium automation testing.

Here’s a short glimpse of the Selenium 101 certification from LambdaTest:

Note: Online Text Repeater - You can repeat words in your text as many times as you want. Just write or copy and paste the text, and choose how many times you want it to appear. This tool is also called a Text Multiplier Tool, as it multiplies the number of words you write.

Cross Browser (Compatibility) x (Accessibility)

If you have reached this point you might be familiar with the importance of the cross browser compatibility till now. But there is still a lot more of to it and if I go on I can also write a book on that. Don’t mind, I surely will. 😉

Let’s now explore the yet major aspect of cross browser compatibility that is accessibility.

The major aim you have is to provide all your users the same experience across all the browsers. When we talk about all the users, we can’t simply ignore the ones that are differently gifted or the persons with disabilities. So, accessibility adds to the cross browser compatibility by making the web available no differently for them. If your website works on all browser but fails to show its value on screen readers then you are missing out on a major section of population.

As stated by WHO, 285 million people are visually impaired worldwide so your website ought to work fine for them too.

For those who have hearing impairments, having transcripts in videos on your websites can help.

When you account for accessibility to your website, you benefit other users by adding SEO to your website in addition to helping the differently abled people.

Screen reader accessible pages are also accessible to search engines by the benefit of search engine algorithm.
Adding transcripts in videos means more content, i.e. more SEO friendly website.

Not just this, search engines love accessibility friendly websites, so they give special brownie points to accessibility friendly websites. So, it’s going to benefit you in more ways you can imagine.

Note: UTF8 Decode - UTF8 Decoder is a variable-length character decoding that can make any Unicode character readable. Each Unicode character is made readable using 1–4 bytes. UTF-8 is the most common Unicode decoding, and is used by a majority of applications and websites.

If you are not cross browser compatible, your competitors will benefit from that!

Yes, and that’s absolutely true. Because user may love you, they may come to you but if you don’t serve them well they will go away and may never return.

Because, users won’t switch their browser to see you working, they will switch the website and to whom will they head to? **Your competitors.

If your website fails to meet their standards on their browsers, you are going to be in trouble as:

45% will hesitate in visiting your website again or they may never visit it.
32% of the users, you find your site problematic in one way or another are less likely to pay you for your service.
35% of the users will make a more negative perception of your company.
Even 22% of them will leave for good.

So, may be your actions will benefit your competitors along with causing loss to you.

Note: Online Text Rotater - With this tool, you can rotate a letter in a sentence to the left or right. If you select the left option, the text will shift one character to the left. In this case, the first letter will end up at the end of the string. If you choose the right direction, then the letter from the end of the text will move to the front.

Mastering the Art of making a website cross browser compatible

If there is so much to cross browser compatibility, so haven’t everyone just done that already?

Making your website cross browser compatible is an art. Some major hacks of mastering this art includes:

Staying up-to date with the latest technologies: There is no harm in keeping in pace with the latest technologies. Stay in pace with the latest web development technologies, development tools, updates in libraries, frameworks. This will help you to take care of your websites cross browser compatibility with implementations of these technologies, supported libraries, frameworks and yes, making sure of your website’s performance of the latest released browsers and browser versions.

Testing carefully: **Test your website thoroughly for various platforms and browsers using some tool. LambdaTest is a cross **browser compatibility testing tool that can help you ensure that your website works fine for those other browsers too. 😉

Accessibility: Make sure that your website is accessible to all. Including the persons with disabilities too.

Pleasing look and feel: Your website should provide a pleasing look and feel to the users no matter what. Make sure that your users love it on every platform they access it.

So, the Question is How can you make your website cross browser compatible? Well, that’s a whole new blog topic and I don’t want to hang you out just here. You can find it out in my next blog. Till then adios.

See you in the next blog with on: How can you make your website cross browser compatible?

Performing Cross Browser Testing with LambdaTest

Deeksha Agarwal — Tue, 19 Apr 2022 09:11:23 +0000

With so many options available in the market, the user always remains in a dilemma which tool to use. We are here to ease your problem and to help you how can you use the perfect tool to perform cross browser testing.

LambdaTest, a free cross browser testing platform where you can test your website/ webapps across 3000+ OS, browser, browser versions, and resolutions on mobile and desktop devices, can be your all time best friend for fulfilling your cross browser testing needs.

So, the various types of cross browser testing that you can perform using LambdaTest includes:

Live testing on mobile and desktop devices.
Visual UI testing to find out regression bugs using Screenshot testing, responsive testing, and Smart Testing.

Apart from real time testing where you get access to a real machine running choice of virtual environment, you can also log bugs directly to your favourite project management tool through easy integrations.

Single click bug logging as you can guess from the name, can help you move your bugs to bug tracker tools with just one click. So, this saves you from the pain of creating a bug, adding details, and even attaching screenshots as LambdaTest does that for you. LambdaTest comes with one click integration with tools like JIRA, Asana, Trello, Github, and Slack, and you can send issues directly to these tools with LambdaTest’s one click bug logging feature.

Coming back to performing cross browser testing, let’s start with Real time testing.

Performing Real Time Cross Browser Testing with LambdaTest

In real time live interactive cross browser testing, you can test your website/ web application across various browser and OS combinations on desktop and mobile devices. You can test as if you are using a real machine and not a virtual machine.

To get started, you need to login to LambdaTest first, if already have an account else sign up to LambdaTest.

Once you log in, you need to start your real time cross browser testing.

So, you need to go to real time menu, enter your URL which you want to test, select the configuration for which you want to perform cross browser testing and then click on start.

Boom!

A new virtual machine will be fired up in your local machine on which you can test your website/ web application for cross browser compatibility.

You’re all set with the configuration you selected. Now you can perform testing, take screenshots in between if you find a bug, mark as a bug, record video of the test session for further consideration, save image to your LambdaTest’s gallery, change the resolution of the machine on the go, move your test to a project, change basic settings, and once you’re done with the test you can end session.

You’ll find an additional ‘Switch’ feature on the top of the left menu bar which helps you in switching to a new configuration without the need of ending the session and re-launching it again. You can just select switch and the new configuration and the new VM will be up on your screen.

With so much features available, you will find everything handy while testing.

You can also perform real time testing on mobile devices. For this, you need to go to the mobile icon under real time testing.

Select the mobile device and then go ahead with your testing just like you did in desktop devices. In iOS simulators you’ll find an additional ‘Clear Cache’ functionality that lets you clear your cache while performing your testing so if you make some changes and you want to test them in the same session, you don’t need to go through the hassle of clearing cache following the long and hectic method, all you need to do is to just click on clear cache and you’re all set to test again.

Visuals are easier to retain and so we’ve taken care of that too, you can watch the same in a video.

This certification is for anyone who wants to stay ahead among professionals who are growing their career in Selenium automation testing.

Here’s a short glimpse of the Selenium 101 certification from LambdaTest:

Note: Random Word Generator - LambdaTest’s free online Random Word Generator allows users to generate random word as per their requirements in no time. In the case of our random word generator, a random word is one that cannot be predicted because it is chosen at random from the database of words in our generator.

Performing Visual UI Testing With LambdaTest

People just take 10th part of a second to make judgement about a website, so you need to make sure that your website doesn’t have any visual bugs. To make sure of this, LambdaTest’s visual UI testing can help.

You can perform Screenshot Testing, Responsive Testing, and Smart Testing under LambdaTest’s Visual UI Testing.

Performing Screenshot Testing With LambdaTest

With LambdaTest’s screenshot testing feature you can take as many as 25 screenshots at a time on different mobile and desktop configurations.

You need to select the configurations(max. 25), enter the URL and click on ‘Generate’. Once you do so, the screenshots will come up on your screen within a few seconds.

You can now download the screenshots,if you find any bug then you can mark it , move to some issue tracker tool, or save them.

As simple as that!

However, if you are worried about testing the responsiveness of your website, you need to perform responsive testing under Visual UI Testing section.

Note: RC32 Hash calculator - RGB and HEX colors both refer to the same thing, a red, green, and blue color value. HEX and RGB are two color languages that refer to themselves using sets of three numbers, rather than letters. HEX numbers can be used in coding, for instance when using the CSS file format.

Responsive Testing With LambdaTest

In responsive testing, you can test how your website/ web app responds to various screen sizes with LambdaTest. You have to test your website for certain breakpoints. Based on market research, LambdaTest has selected a combination of various devices having different breakpoints and usability over the world.

So, you need to enter your URL and click on generate, all the screenshots on the selected devices will be available and you can test if your website is responsive or not.

There are various other features like defer time, local host testing which adds grace to your testing requirements.

Note: RIPE MD 160 hash calculator - RIPE MD 160 is a checksum and hash generator for web developers and programmers. This free online tool helps users encrypt their sensitive data, such as passwords and other personal information. The following algorithm will generate a 160-bit message digest from an arbitrary quantity of data.

Smart Visual UI Testing with LambdaTest

Many times some of the bugs creep in with every new build and our poor eyes can not find them by merely looking at it. This is where LambdaTest’s technology for smart visual UI Testing comes into picture.

You can find some visual bugs like icon size, text size, font style, images, padding, etc which are difficult to figure out by just uploading screenshots for the same.

With the color change, you can figure out the visual differences between two or more images or screenshots at a time. You can then mark it as a bug, move to bug management tool, edit it and leverage it in many other ways.

If you want to know how to perform step by step smart visual visual UI testing, you can read more on it or also watch it.

You can also use LambdaTest’s inbuilt issue tracker if you don’t use a third party bug management tool.

There are various other features of LambdaTest that are still to unveil 😉 All you have to do is to stay tuned.

Finding Cross Browser Compatibility Issues in HTML and CSS

Deeksha Agarwal — Mon, 18 Apr 2022 12:44:04 +0000

Cross browser compatibility bugs are inevitable for any web project irrespective of whatever platform they are using for development. And most importantly, they keep creeping in at every iteration.

Since it’s first inception, JavaScript has been the main culprit behind browser compatibility issues, as it was the fastest growing technology of the time. So fast that most browsers had to catch up to give support. However after new HTML5 standards, JS got a new partner in causing havoc. Since HTML and CSS are the simpler languages, people misunderstood them as not being the culprit for cross browser compatibility issues. However, this doesn’t always hold true. Many times the smallest member of the house is the problematic one and may cause a lot of unknown issues.

So, this may be one of the main reason you need to handle them delicately. But, before you handle them you need to find out the errors first.

Finding and Fixing General Problems

The major problems that usually went unnoticed by us are the most simpler ones. And these problems are so simple that they may pass through our eyes a hundred times and still we fail to figure them.

It’s just like the semicolon(;). Syntax errors are the highest cause of high pressure among web developers.

So, for CSS and HTML you don’t always need to go finding out the semicolon if you just use a validator for the same.

A validator may help you figure out some mistakes that seem so simple. For HTML, it validates the tags are closed and nested, a DOCTYPE is used, and tags are used correctly while for CSS it checks that the property names and values are spelled correctly, no curly braces are missed, and other CSS properties.

You can use W3C Markup validation service to validate your website’s HTML code or if you simply want to copy paste your HTML you can use Free Formatter or JS Formatter.

For CSS validation, you can use The W3C CSS Validation Service — W3 Jigsaw or CSS Validation Service.

These validators will help you figuring out the problems but if you also want to go ahead and know the bad practices that you’re using you may need to use a Linter. A linter not only points out the errors but it also flag up the warnings for your bad coding practices.

There are many linters available online for CSS, HTML, JS and other languages as well. The best of which are: Dirty Markup (for CSS, JS, HTML), CSS Lint( specially for CSS), JS Lint(for JS only).

Note: Placeholder Image Generator - A placeholder image is a visual representation of an idea or concept before the final image has been created. Designers commonly make use of “placeholder” images in an early design stage. Just enter the width and height of an image to generate it in either JPG or PNG format.

Hunting Common Errors

Using validators and linters, you can beautify your code and figure out common problems but if you are on a hunt for finding the errors you can use one inbuilt feature in your browser, ‘developer tools’.

This works well for CSS errors as HTML errors normally don’t tend to show up in dev tools as they try to cover them up by correcting badly formed markup automatically.

You can find out errors as mentioned: Invalid property type.

These sort of errors may point out to be some of many reasons which causes cross browser incompatibility as some browsers do not support some specific CSS and HTML elements and you can go ahead for finding these elements.

This certification is for anyone who wants to stay ahead among professionals who are growing their career in Selenium automation testing.

Here’s a short glimpse of the Selenium 101 certification from LambdaTest:

Note: Random Password Generator - Random Binary Generator generates random binary numbers of a specified length. It can be configured with the number of binary digits, and total digits wanted.

Unsupported CSS Elements in Browsers

Older versions of Internet Explorer, one of still the most used browsers doesn’t support many CSS elements some of which are:

CSS3 selectors
CSS Counters
CSS3 Box-sizing
CSS font-stretch
CSS namespaces
CSS3 Colors

See full list of unsupported CSS elements in all internet explorer browsers.

Similarly, some older Google Chrome versions doesn’t support the following CSS elements:

CSS overscroll-behavior
CSS display: contents
CSS Paint API
CSSOM Scroll-behavior
CSS Scroll snap points
CSS Conical Gradients
CSS font-size-adjust

[Unsupported CSS Elements in any latest chrome browsers](https://www.lambdatest.com/blog/wp-content/uploads/2018/05/5-2.png)

Similarly, you can check for any of the CSS elements that you are using in your website that what are the browsers that don’t support those elements. Unsupported CSS elements cause cross browser compatibility issues.

Note: Random Character Generator - The Random Character Generator is an essential tool if you want to avoid patterns when generating a unique set of strings. The utility generates a sequence that doesn’t follow any recognizable pattern and is random.

HTML Issues in Browsers

If you are willing to figure out the HTML issues, then the first and foremost thing to do is to check for the DOCTYPE. Have you used it?

And once you verify this, you need to make sure that you’re not using any of the third party code. Many times when you use a third-party code, you might find that the HTML generated by the third party app may be using class ID or Name that you’re using for a different purpose in your code. Hence that might a big problem and becomes hard to debug as it will not show any error however you’ll find the difference in the rendering of HTML causing cross-browser issues.

Many older versions of Internet explorer browser do not support HTML elements like:

Video element
Audio element
Search input type
Form validation
Multiple file selection
Offline web applications

See full list of unsupported HTML elements in all internet explorer browsers.

[Unsupported CSS Elements in internet explorer browser](https://www.lambdatest.com/blog/wp-content/uploads/2018/05/6.png)

Go ahead, test your website across various browser combinations and figure out what went wrong, which unsupported CSS and HTML elements are you using in your website and now it’s turn to rectify them. Because it’s better late than never.

Automated Cross Browser Testing

Deeksha Agarwal — Thu, 14 Apr 2022 09:28:37 +0000

Testing a website in a single browser using automation script is clean and simple way to accelerate your testing. With a single click you can test your website for all possible errors without manually clicking and navigating to web pages. A modern marvel of software ingenuity that saves hours of manual time and accelerate productivity. However for all this magic to happen, you would need to build your automation script first.

In our previous post we focused on setting up complete test suite environment for running selenium scripts. But that script had a major drawback. That setup was focused on testing on only a single browser. Cross browser compatibility testing is a major pain point for all testers and it’s also a major test case for all functionality testing cycles.

In this post we will focusing on running testing scenarios on Chrome, Firefox, and Opera browsers simultaneously. We would be focusing on cross browsers issues along with functional issues.

It will not only save your time and efforts but will also help you deliver a seamless experience to the user of your website. Well, that’s the idea behind cross browser testing. Isn’t it?

Before starting, I would highly recommend going through our previous post on writing automation testing scripts.

Since we last left, you may now need to continue that further by some more modifications. Get started step by step.

Installing Maven

Step 1: Go to Marketplace and install Maven.

Go to help → Eclipse Marketplace → search for Maven→ confirm → confirm → Finish

Note: CRC32 Hash calculator - This CRC32 hash generator lets you quickly generate the CRC32 checksum hash from a given string. In addition, you can generate CRC32 hashes via your web browser.

Restart Eclipse

Step 2: Restart the Eclipse to make changes effective. Once you restart the eclipse, it’s time to start with creating the project.

Note: Character Count - The character count allows programmers to calculate the length of any given string of text or numbers in order to check the total number of characters (including spaces) there are in the string.

Create a Maven Project

Step 3: To create project, go to File→ New→ Other→ Maven→ Project
You are now all set to create a maven project.

Here you need to enter the group ID and artifact ID. Let’s say group ID is com.browsers1 and artifact ID is crossbrowser.

After entering the IDs click on Finish and your maven project will be created.

On the left hand side, you’ll find two folders namely src/main/java and src/test/java. Under src/test/java you’ll find com.browsers1.crossbrowser. Right click on com.browsers1.crossbrowser select new and then create a class.

Enter the name as CrossbrowserTest and click on finish.

Note: Make sure you start your class name with uppercase and end it with test.

Download drivers

The next step is to install drivers for browsers. Since you are going to control your browsers using automated softwares so you need to make sure that the browsers that you’re going to use in your script should have their drivers installed.

For firefox you need to install Geckodriver. For chrome, chromedriver and for opera install operachromiumdriver. Since we are going to use these three browsers in our script so we’ll need to install these. However, if you plan to add more browsers to your script make sure to have their drivers installed.

After you download and install drivers, let’s start with adding dependency files. It is necessary to have dependency files for every framework that you are making use of. So we need to download dependency files for Selenium, Testng in pom.xml file.

Select pom.xml and delete the lines between to and add your dependency files using:

org.testng
   testng
   6.14.3
   test

<!-- https://mvnrepository.com/artifact/org.apache.maven.plugins/maven-surefire-plugin -->

org.apache.maven.plugins
   maven-surefire-plugin
   2.19.1

<!-- https://mvnrepository.com/artifact/javax.mail/mail -->

            javax.mail
            mail
            1.5.0-b01

org.seleniumhq.selenium
            selenium-htmlunit-driver
            2.52.0

junit
            junit
            4.12

info.cukes
            cucumber-java
            1.2.5
            test

info.cukes
            cucumber-picocontainer
            1.2.5
            test

info.cukes
            cucumber-junit
            1.2.5
            test

org.seleniumhq.selenium
            selenium-java
            3.11.0

org.seleniumhq.selenium
            selenium-firefox-driver
            3.5.3

org.seleniumhq.selenium
            selenium-chrome-driver
            3.5.3

org.seleniumhq.selenium
            selenium-ie-driver
            3.5.3

org.seleniumhq.selenium
            selenium-edge-driver
            3.5.3

org.apache.maven.plugins
            maven-resources-plugin
            3.0.2

org.seleniumhq.selenium
            selenium-support
            3.5.3

This code will add all your dependency files to your project.

Note: BCD to Decimal - In computing and electronic systems, a binary-coded decimal (BCD) is a method of representing each decimal digit by its binary sequence. The BCD to Decimal Converter (BDC) converts a binary-coded decimal (BCD) to an integer.

Write Final Code

Now save this and move to creating a script for final step.

Again go to src/test/java select crossbrowsertest.java and then copy the code to its workplace.

String baseUrl = "https://www.amazon.com/";
         String expectedTitle = "Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs &amp; more";
         String actualTitle = "";
         // launch Chrome and direct it to the Base URL
         driver.get(baseUrl);
         // get the actual value of the title
         actualTitle = driver.getTitle();
         /*
          * compare the actual title of the page with the expected one and print
          * the result as "Passed" or "Failed"
          */
         AssertJUnit.assertEquals(expectedTitle, actualTitle);

         //close Fire fox
         driver.close();

     }

     @Test
     public void AmazonTitleTest2() {
         // declaration and instantiation of objects/variables

         //comment the above 2 lines and uncomment below 2 lines to use Chrome
      System.setProperty("webdriver.ie.driver", "C:/Users/Admin/Downloads/IEDriverServer.exe");
   driver = new InternetExplorerDriver();
         String baseUrl = "https://www.amazon.com/";
         String expectedTitle = "Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs &amp; more";
         String actualTitle = "";
         // launch Chrome and direct it to the Base URL
         driver.get(baseUrl);
         // get the actual value of the title
         actualTitle = driver.getTitle();
         /*
          * compare the actual title of the page with the expected one and print
          * the result as "Passed" or "Failed"
          */
         AssertJUnit.assertEquals(expectedTitle, actualTitle);

         //close Fire fox
         driver.close();

     }

 }

Once you paste this code, you now need to convert it to testng.xml.

To proceed with that Right click on Crossbrowsertest.java click on testng→ convert to testng→ next→ click the checkbox→ finish.

Now a new file, testng.xml will be created.

Run testng.xml as a testng suite and you’re all set to perform automated cross browser test.

This code will run amazon.com on chrome, mozilla, and opera and test if the website opens or not. If it opens, it will show pass else will show fail.

You’ll soon see an automation software controlling your three browsers and you’ll also see the test being performed on your screen.

You can also add more browsers and change the URL you want to perform the test on.

If you want to cross check the same using manual cross browser testing, you can always do so using LambdaTest. It provides you 3000+ browsers and OS combinations to test on. Soon, you’ll also find LambdaTest to help you perform automated cross browser testing.

Till then stay tuned and Happy Testing!

Typography And Cross Browser Compatibility Testing

Deeksha Agarwal — Wed, 13 Apr 2022 10:23:09 +0000

Colors, icons, images, content, layout, design elements, animations, functionalities, hover elements, buttons, lines, and typography all come together in a unique blend of harmony to make the web design a work of art. It’s a collection of thousands of different web elements coming together to convey a message in the most innovative way possible. In this symphony, Typography plays a major role. A good font can drastically change the whole design.

But sometimes amidst of using beautiful fonts we forget to take care of their compatibility. Font formats that we use are not always compatible with every browser. So if a font is looking beautiful in Mozilla doesn’t imply that will look the same in Opera too because may be Opera doesn’t support the underlying tag itself.

So, while going for selecting a font format, you need to be sure that the one that you’re going to use is compatible with all browsers and will render the same irrespective of the browser used.

How to make sure which font format to use and when?

Well, there are many types of font formats available with the most common ones like EOT, OTF, TTF, WOFF, SVG. You may find it very amazing to select from a huge palette but it isn’t as simple as it sounds because there is not even a single font format that is supported in all the browsers. So you have to somehow use the combinations of font formats to make it support in all browsers.

Note: BigInt - BigInt is a library for arbitrary-precision integers in JavaScript.

What are the font format choices you have?

You’ll find a wide choice of font formats while designing your website. The various file extensions that you’ll come across include:

Extension	File Types
.ABF	Adobe Binary Screen Font File
.ACFM	Adobe Composite Font Metrics File
.AFM	Adobe Font Metrics File
.AMFM	Adobe Multiple Font Metrics File
.BDF	Glyph Bitmap Distribution Format
.CHA	Character Layout File
.CHR	Borland Character Set File
.COMPOSITEFONT	Windows Composite Font File
.DFONT	Mac OS X Data Fork Font
.EOT	Embedded OpenType Font
.ETX	TeX Font Encoding File
.EUF	Private Character Editor File
.F3F	Crazy Machines Font File
.FEA	AFDKO Feature Definitions File
.FFIL	Mac Font Suitcase
.FNT	Windows Font File
.FON	Generic Font File
.FOT	Font Resource File
.GDR	Symbian OS Font File
.GF	METAFONT Bitmap File
.GLIF	Glyph Interchange Format File
.GXF	General CADD Pro Font File
.LWFN	Adobe Type 1 Mac Font File
.MCF	Watchtower Library Font File
.MF	METAFONT File
.MXF	Maxis Font File
.NFTR	Nintendo DS Font Type File
.ODTTF	Obfuscated OpenType Font
.OTF	OpenType Font
.PCF	PaintCAD Font
.PFA	Printer Font ASCII File
.PFB	Printer Font Binary File
.PFM	Printer Font Metrics File
.PFR	Portable Font Resource File
.PK	Packed METAFONT File
.PMT	PageMaker Template File
.SFD	Spline Font Database File
.SFP	Soft Font Printer File
.SUIT	Macintosh Font Suitcase
.TFM	PageMaker Template File
.TTC	TeX Font Metric File
.TTE	TrueType Font Collection
.TTF	Private Character Editor File
.TXF	Celestia Font Texture File
.UFO	Unified Font Object File
.VFB	FontLab Studio Font File
.VLW	Processing Font File
.VNF	Vision Numeric Font
.WOFF	Web Open Font Format File
.WOFF2	Web Open Font Format 2.0 File
.XFN	Ventura Printer Font
.XFT	ChiWriter Printer Font
.YTF	Google Picasa Font Cache

Out of all these formats, the most common ones are EOT, OTF, TTF, WOFF, SVG. So, I’ll focus around the compatibility of these formats.

Note: Date.prototype.toLocaleDateString - date-to-localizeddatestring method generates a language-sensitive representation of a given date, formatted according to locale, options.

EOT (Embedded Open Type Font)

EOT font type font was discovered by Microsoft 15 years back. This font format is supported on only Internet explorer.

TTF( TrueType Font)

TTF was developed by Apple and Microsoft late in 1980s. It is the most common font format for both Windows and Macintosh operating systems.

OTF(OpenType Font)

An evolution of TTF, OTF is developed by combined efforts of Adobe and Microsoft. Supported in Mac and Windows OS OTF provides support for various platforms and has expanded character sets. It support is same for browsers as of TTF.

Note: ECMAScript 5 - es5 provides extensive support for a full and modern JavaScript environment, including support for ECMAScript 5 and the vast majority of common JavaScript libraries.

WOFF( Web OpenFont Format)

As the name suggests, WOFF is an essential font format for web pages. The major feature that WOFF provides is fast loading web pages since it uses the compressed versions of TTF and OTF fonts. Developed by Mozilla in 2009, WOFF is now a W3C recommendation.

The upgraded version of WOFF, WOFF2 has support for different browser sets:

SVG(Scalable Vector Graphics Font)

SVG fonts files contain the glyph outlines which are generally represented as standard SVG elements and attributes, just like they were single vector objects in the SVG image. These files have pretty large size and are uncompressed unlike EOT, WOFF.

Browsers And Font Format Support

The major issue that you might face is your font don’t render properly in all browsers so you have to make sure that you add font files to your web code. To make sure of this, you need to be aware the font format support in various browsers. Table depicts the support for various font types in different desktop browsers.

For mobile browsers the font format support goes as follows:

So, there is no single font format that is supported in all browsers and browser versions. As you may notice, TTF and WOFF file formats are supported in nearly all latest web browsers (except opera mini). As a developer it would make your life quite easier if you use TTF and WOFF web formats. But still, you would need to have a combinations of font formats to make all the fonts supported in all browsers.

You can use caniuse to find out version support in font formats based on your cross browser support strategy.

How To Avoid Browser Font Incompatibility?

Knowing which browsers support a font family is one thing and making them support is another. So to make sure that your font family is rendered properly in every browser even if the user doesn’t have the font family installed on his local computer is to use @font-face in CSS style.

Addition of @font-face allows a webpage to download the font from the hosted location and display it in the CSS as specified.

Add the code to use stylesheet before any styles:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Once you make sure to add the above code, you can use it to style elements like this:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

If you want to style a heading, this code format can be used:

h1 {
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

You can see a working example of how you can use it on w3schools.

Using a bold font:

@font-face {
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight: bold;
}

This might help you make support font formats in all browsers.

Fixed? Now It’s Time For Some Cross Browser Testing.

Having made sure that your browsers render all the fonts properly in all browsers you need to test them if it is fixed or not. For this, you need to test your website for cross browser compatibility.

Font rendering is a part of visual appeal. You can use LambdaTest’s Visual UI testing feature to test visual appearance of your website. Take screenshots on various browsers and compare them if they look the same.

So, it’s time you checked your website if the fonts render properly for your users too or it just looks perfect for you.

Cross Browser Testing Checklist Before Going Live

Deeksha Agarwal — Tue, 12 Apr 2022 10:31:32 +0000

When someone develops a website, going live it’s like a dream come true. I have also seen one of my friends so excited as he was just about to launch his website. When he finally hit the green button, some unusual trend came suddenly into his notice. After going into details, he found out that the website has a very high bounce rate on Mobile devices. Thanks to Google Analytics, he was able to figure that out.

The website was unbelievable on mobile devices, all the elements left their place and logo was not even fit to screen. That day taught him a lesson, and he passed me on the same, ‘Go through a checklist for cross browser testing before going live’.

Cross browser testing is very necessary in this digital world where everyone is browsing the website on a different platform, OS, browser, and you can’t even think of that beforehand. Formulating a perfect cross browser testing strategy might help you in that but sometimes even after that you need to be prepared for some un-welcomed bugs. However, a proper checklist might help you avoid them or figure them out before anyone else does.

Handy Requirements For Using The Cross Browser Testing Checklist

Before going on for the checklist you need to make sure that you know how to perform cross browser testing.

If you are going to perform cross browser testing, you must need what all browsers and devices are you going to test on. So, formulate a proper cross browser testing strategy.
When done with cross browser testing strategy, make sure you test your locally hosted website or dev site on cross browser testing tool like LambdaTest before going live. The platform has a feature called LambdaTest Tunnel that give you flexibility to connect your locally hosted websites or web apps to test on cloud for cross browser testing using SSH tunnel feature. Cross browser compatibility and cross browser accessibility effects your website’s SEO as well therefore it’s always important to get thoroughly tested and perfectly compatible site indexed on search engines.
Keep mobile devices handy, or you can also set up emulators or simulators. If you want avoid that too, use a platform that can provide you all the devices handy. LambdaTest also provides you a wide range of iOS and Android mobile devices to test upon.

Once done with the prerequisites, the immediate step is to go through the checklist.

The Ultimate Checklist For Cross Browser Tests Before Going Live

The checklist contains various elements that need to be tested before going live in your local environment.

Alignment of Elements in All Browsers

Make sure that the elements are in the correct place that you intend them to be in.

Verification of SSL in Various Browsers

If you have faced this error, one of the reasons can be that your website’s SSL certificate doesn’t support some of the browser versions. If your user try to access your website those browser versions, then they might not be able to access it at all. So, check your website’s SSL certificates in all browsers before going live.

Rendering of Font in Different Browsers

Who don’t love beautiful fonts on their website, however they can cause blunders if they don’t render properly. Rendering of fonts is highly affected by the browser in which your site is being browsed. So, you need to make sure that your fonts render the same in every web browser.

Note: String.prototype.includes - The includes() method determines whether one string may be found within another string.

Compatibility of Media Elements with Diverse Browsers

Videos are the most loved form of media nowadays. Web designers and developers have been taking advantage of the fact and you can easily find either a demo video or some tutorial video running on the homepage of a website. But browser compatibility can cause you trouble if you some use unsupported media elements and that’s not restricted just to videos, but to images as well. So before going live make sure that you use those elements that are supported in all browsers or you have a fallback for unsupported elements so that your users don’t face this!

Understand Multimedia compatibility with Different Browsers in detail in our blog.

Note - Arrow functions - Manage function and class scopes with the arrow => function syntax and lexical this binding.

Are Your APIs Connected in All Browsers?

API calls are also dependent upon browsers. Some browsers acknowledges API requests while others might avoid this or throw you an error. Before going live, always be sure that the APIs that you’re using are connected in every browser. Because there are some browsers like Opera Mini that don’t support APIs like Websocket.

Also some API call methods like getUserMedia/Stream will throw you an error on Opera Mini, iOS Safari 10.3, IE 11. So, you need to be sure that your APIs are browser compatible before going live else when you are on the public server your users might face unconnected to the worlds.

Note - Async functions - Async functions make it possible to write asynchronous code that reads like synchronous code.

Make Sure You Validate Your CSS And HTML

Tags left open can be nightmares for developers and horrifying for the users if they see the code live on screen. So, it’s mandatory to make sure that the code is clean and properly validated. W3schools have a soft corner for the same. You can easily validate your HTML,JS, and CSS before going live on tools like W3C Markup validation service, Free Formatter or JS Formatter, W3C CSS Validation Service — W3 Jigsaw or CSS Validation Service.

Browser Compatibility issues can be found to a greater extent using these tools and you can further proceed with solving them.

After checking out all the major compatibility issues, you need to perform a round of cross browser testing in general taking of minor but important factors like:

Alignment of elements: Are all the elements aligned the way you want them to.
Pop Ups: Check if the pop ups are being displayed properly and are opening in all browsers.
Alignment of checkboxes: Checkboxes can cause problems in many browsers. Make sure that your checkboxes are aligned and in proper working condition.
Alignment and functioning of Buttons: Buttons hold a major part when it comes to CTAs or any other action so you need to be sure that they are aligned and properly working across diverse browsers.
URLs redirection from buttons: Check the links to which the buttons are redirecting.
Drop down Menus: Verify that the drop downs work as expected across all browsers.
Forms and Form APIs: Make sure that the forms take in data and the data is transferred to the collecting API endpoint intact.
Grids/Tables: Check the alignment and location of tables and grids if any across every browser.
Sessions and cookies: If your website uses cookies, verify that the prompt is there and it works accordingly.
Dates: Test if the date formats as decided in every browser.
Zoom in and Zoom out functionality: Check if the zoom in and zoom out functionality works properly and doesn’t break the UI when in action.
Appearance of scroll: Check if the scroll is present on both horizontal and vertical bars and is functional.
Flash: Make sure that Flash supported videos, animations, RIAs, and applications work cross browser.
HTML animations: Verify if your animations load across all browsers.
Mouse hovering: Check if the mouse adjusts to the button, text box, link, and white space accordingly.
Image alignment: Make sure that all the images are aligned and in place across different browsers.
Alt tags: Alt-tags are again important and we need to be sure that they are in place.

And everything else that you can think of in every possible browser, OS, and device combination.

As we can see here, there are various things to be tested in a local environment across thousands of combinations for making sure it doesn’t hinder the experience of the users once the website is made live. So, we need to make sure that we test on all possible combinations to avoid further surprises. Since, many of the following tests are repetitive and time consuming, so we can make use of an online Selenium grid for automating cross browser tests. With such automation, you can avoid repetitive and time consuming tasks and automate them using a simple script.

LambdaTest also provides you an online selenium grid on which you can automate your tests on both public and local servers and test on LambdaTest cloud grid of more than 3000+ devices, browsers, browser versions, and resolution combinations. Hence, you need to make sure that you find the best cross browser testing tool and then you can perform tests on your checklist, some manually while others using automation.

Once you’re done with testing this cross browser testing checklist, you’re all set to go live and hit the green button. I hope you might not face the situation like my friend because you’re smart enough not to repeat the same mistake.

Let us know if I missed something that should be included in the checklist in the comments section below! Till then, Happy Testing and all the best for the launch!

Top 10 Books for Getting Started with Automation Testing

Deeksha Agarwal — Mon, 11 Apr 2022 09:47:16 +0000

Are you looking for the top books for Automation Testers? Ah! That’s why you are here. When I hear the term book, This famous saying always spins up in my head.

There is no friend as loyal as a book.- Ernest Hemingway

Well, books have always been a man’s best friend for a long time. Digitalization has changed our way of reading. Kindles, blogs, pdfs, have evolved like a beast however, the pleasure and knowledge gained from hardcover books is incomparable. But when it comes to finding out the top books it requires a lot of research. Everyone is very much inclined towards the digital world, always indulged in computer screens doing their work and when they get stuck they have to again withstand the screen to find out the solution.

Reading hardcover books in that case, gives a relief. So, here we have compiled a list of best books for automation testers which they must read once in their lifetime.

1. Clean Code: A Handbook of Agile Software Craftsmanship by Robert C. Martin

The first step you take towards being an automation test engineer is towards learning coding. Coding is not the challenge for most of the developers out there however developing a clean and readable code is. This book is the first read book for every automation tester and a beginner in development. In this book, you’ll get to know about meaningful names, comments, formatting, error structures, classes, systems, concurrency, emergence, and a lot more.

2. The Just Enough Software Test Automation by Daniel J. Mosley and Bruce A. Posey

This book is just enough for every test automation engineer. One of the best books that are loved by beginners to advanced level automation test engineers. In this book you’ll learn what and when to automate, test requirements, creating a test case, automating unit testing, development of automation test script, automated integration testing, automated regression testing, and a huge mountain of automation.

3. Implementing Automated Software Testing: How to Save Time and Lower Costs While Raising Quality by Elfriede Dustin, Thom Garrett, Bernie Gauf

As the name suggests this book will help you implement automated software testing(AST) while maintaining quality and lowering cost and reducing time. My famous chapter in the book is ‘Why software testing fails and pitfalls to avoid’. Along with this you’ll also learn some lessons with this book like how to automate, testing of AST framework, developing a test automation strategy.

4. Software Test Automation: Effective Use of Test Execution Tools by Mark Fewster and Dorothy Graham

In this book, you’ll learn various techniques for automating test execution, scripting techniques, architecture, metrics, implementation of various tool. On the top of it, you’ll also get to learn various key points from the valuable case studies. This book is a pure gold for all the test automation engineers out there!

5. The Agile Samurai by Jonathan Rasmusson

If you’re working as an automation test engineer or planning to be one, then there is no need to introduce agile as automation testing is the first love of agile developers. This book will help you to understand agile in detail. It will make you familiar with continuous integration, test-driven development, unit testing, agile manifesto, agile planning and a lot more.

Note: SVG (basic support) - This animated graphical element is a method of displaying basic Vector Graphics features using the embed or object elements. Basically it’s just an image that contains all the SVG content that you have in an SVG file.

6. Experiences of Test Automation: Case Studies of Software Test Automation by Dorothy Graham and Mark Fewster

In this book you’ll learn from others’ experiences. It is a collection of various automation implementation stories. Different people have solved different automation problems in different manners- learn from this book how they implemented it, challenges faced, solutions and much more.

7. Agile Testing: A Practical Guide for Testers and Agile Teams by Lisa Crispin and Janet Gregory

You’ll learn about various organizational challenges, agile testing quadrants, why we need to automate our tests, what holds us back from automating tests, an agile approach to test automation, what can we automate, what shouldn’t be automated, all in all it’s a full pack you need to learn.

8. Refactoring: Improving the Design of Existing Code by Martin Fowler and Kent Beck

Get to learn about refactoring, figure out bad smells in code, build tests, learn about JUnit framework, making methods call simpler, simplifying conditional expressions, etc. You’ll get to learn about all the ways by which you can improve your existing code to make it more readable and avoid bugs.

Note: SVG in CSS - With this you can easily turn SVG images into CSS backgrounds, and link them to the HTML you want. This can be useful for adding logos to websites or just making something a little more personal in general.

9. The Selenium Guidebook by Dave Haeffner

No one can deny the fact that selenium is the true love for automation testers. But nothing comes without a cost, selenium also poses a lot of challenges for automation testers. In this selenium guidebook, you’ll learn how to use selenium step by step.

10. Beautiful Testing: Leading Professionals Reveal How They Improve Software

The three parts of the book beautiful testers, beautiful process, and beautiful tools sum up what this book is all about. Learn all about testing and quality assurance in a beautiful yet detailed manner with this amazing book.

If you haven’t read some of these or all of these books, it’s time to read them. If you’re looking for more books to read on software testing, find out top 10 books for software testers in our blog.

Let us know what you are reading.

Happy Reading!

And yes,

Happy Testing! 😉

Building a Regression Testing Strategy for Agile Teams

Deeksha Agarwal — Fri, 08 Apr 2022 10:21:03 +0000

If Agile development had a relationship status, it would have been it’s complicated. Where agile offers a numerous advantages like faster go to market, faster ROI, faster customer support, reduced risks, constant improvement etc, some very difficult challenges also follow. Out of those one of the major one is the headache of maintaining a proper balance between sprint development and iterative testing. To be precise agile development and regression testing.

Agile development is a very fast and dynamic development process. Sprint cycles are short and developers churn out features in record times. Similarly testing cycles are also expected to be short to keep up with development times. But in reality most of the times it is not the case. Development is done on one feature, however testing had to be performed on all new and old features. With every new build there is a need for making sure that the new addition or improvement in the code hasn’t compromised the functionality of existing features. You would have to make sure that your users’ experience is only enhanced by new features, not increase his efforts. This is what regression testing is all about. Making sure that the old code conforms with the new code and unmodified code remains unaffected with every build.

But these builds and repeated tests become boring and time consuming after a few cycles and you might miss out on some features assuming that they must be working fine. This may cause you to fall flat on your face!

To avoid that, you’ll need an escape plan by creating a proper regression testing strategy right from the beginning of the development cycle and this strategy needs to be modifies with every sprint coming up.

Before You Build a Regression Testing Strategy

Before building that regression testing strategy, you need to gather some information beforehand.

Gather all the test cases that should be executed
Improvements should never halt. Figure out all the improvements that can be implemented in the test cases.
Estimate the time for execution of test cases
Outline what all can be automated and how?

Note: RGB to Hex Converter Online - Free online tool to convert your RGB color values to HEX color values.

Building a Regression Testing Strategy

The most significant challenge in performing regression testing in agile development sprints is maintaining the balance between sprint development and regression testing. So, we need to follow some of the fast and effective methods in order to perform regression testing without compromising the quality.

Automating Regression Testing

The one of the best ways to fasttrack the regression testing is to automate some of the parts of regression testing. We can create a regression testing script and with every new update the script should be modified and reviewed for its proper working. Your automation test script should cover all the possible test cases and verify your automation script results before moving it to the action item.

Find the Most Prone Areas Due to a New Build

What about using some of the common test cases and utilizing their intelligence to lower our efforts? Well, as a tester we are aware of what development can cause what changes in the build. In other words, we can get a hold of all the possibilities of introduction of bugs due to the new build in already existing code. However, this doesn’t imply that you rely totally upon the guess game.

Use that automation script created above along with some special test cases.

Example: You are testing an ecommerce website and a modification is made in the payment gateway. Now you have two ways, one is to test the entire product every time the payment gateways’ builds are commiting, for every half an hour and the other way around is to figure out the prone areas. In this case, the most prone areas will be checkout process and payment along with email confirmation, text confirmation, OTP or password validation, etc. Once you’re set with this payment fix you can then perform a round of end to end regression testing.

What should save you time, money, and resources? The latter one and that too diligently and without compromising on quality.

Make sure you figure out the difference between smart work and hard work. Though hard work always yields better results but in places where you can solve the purpose though smart work, you should not miss the chance.

Prioritize Your Test Cases

Prioritization helps you manage the test cases based on the severity of issue and the recent changes in the code. Highly severe bugs should be tested at the highest priority and then the lower severe ones follow. This way you’ll able to test all the bugs without missing out on high priority bugs.

There is a 10% possibility of getting highest priority bugs, followed by 30% possibility of getting medium priority bugs, and 60% priority of getting low priority bugs. We need to take care of all the bugs ranging from highest to lowest priority but in an order.

Note: Hex to RGB Converter Online - Free online tool to convert your HEX color values to RGB color values.

Go Ahead and Perform Regression Testing in an Agile Environment

When you implement the following in your regression testing strategy, you will be able to perform regression testing and maintain the pace with the agile development. A perfect regression testing results will help your users to keep trust in your product and you’ll keep delivering the best to them.

LambdaTest, a cross browser testing tool, provides a special feature to minimize your visual UI regression testing efforts. You can perform regression testing for visual UI bugs with just the upload of screenshots after every build(comparison images) and compare them with the ideal image (baseline) and you’ll get the testing results within seconds.

So, go ahead, plan your strategy and perform regression testing with ease.

Happy Testing!

(Unknown): Script Error in JavaScript

Deeksha Agarwal — Thu, 07 Apr 2022 13:33:58 +0000

If someone tries to violate the rule that you have set, what you’ll do in return? Send him Script error.

Not in real life, though. 😉

But in JavaScript, if you try to violate the same origin policy, the browser will send you ‘’Script error’ in return.

When Script Error Occurs In A JavaScript Code?

When an exception violates the same origin policy of a browser in response to onerror callback, the browser responds with a ‘script error’.

Same Origin policy: According to same origin policy, the browser accepts only the scripts hosted on the same server on two different web pages.

Every browser has a set of acceptable or say, required ‘Request Headers’. When you hit any request on the server, it should contain those essentials for request header. Else you are going to face an script error.

Well, this is an intentional behaviour by the browsers in order to prevent scripts from leaking to external domains. As no one wants to entertain the unwanted requests 😉 Do you?

I am facing an Script Error In JavaScript, What Should I Do?

If you also face the same issue, then go ahead with these possible solutions.

1. Set up Cross-Origin HTTP header

Access-Control-Allow-Origin: *

By setting Access-Control-Allow-Origin: to ‘ * ’, you make sure that you can access the resource from any domain. If necessary, you can also replace the ‘ * ‘ by the specific domain name, which you want that should access your domain’s script.

Note: MultipleFailureException happens when Junit runner recognize many failures and collect them into one.

There is different method to set his to * in different environments.

Apache: Create an .htaccess file in the folder where your JS file is served with:

Header add Access-Control-Allow-Origin "*"
Ngnix: Add add_header directive as:

location ~ ^/assets/ {
add_header Access-Control-Allow-Origin *;
}
HA Proxy: Add this asset:

rspadd Access-Control-Allow-Origin:\ *

Note: InvalidOrderingException happens when test execution ordering is wrong and junit runner is not able to invoke them.

2. Set crossorigin=”anonymous”

For every script in your HTML script, that you’ve set Access-Control-Allow-Origin, set crossorigin="anonymous"

<script src="[http://another-domain.com/app.js](http://another-domain.com/app.js)" crossorigin="anonymous"></script>

This code tells that your browser to fetch the target file anonymously avoiding transmission of any user identifying information like HTTP credentials or cookies while requesting by the browser.

If you face any script error in your JavaScript code, hope this article may prove to be of help.

A Complete Guide For Your First TestNG Automation Script

Deeksha Agarwal — Wed, 06 Apr 2022 15:24:32 +0000

The love of Automation testers, TestNG, is a Java testing framework that can be used to drive Selenium Automation script.

When it comes to automation, no one can compete with Selenium.

If you are planning to dive into the field of automation testing, TestNG can be your topmost choice.

For a beginner, it becomes hard to understand the point from where he needs to start.

So, in this blog, we have come up with a step by step method to assist you in getting started with your first automation test script.

For this, you need to set up an Test Automation environment for selenium with Eclipse first and then go ahead with the script. Let’s do it.

Open your browser in the next tab and get started for your first automation test script in TestNG. All you need is just 20 minutes.

Setting Up The Environment

Step 1: First of all, download java8 or jdk1.8 and install it in your system.

You can use the link to download java8.

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

After installing java8, set up the path.

To do so, Go to Start→ Computer→ Right click → properties→ Advanced system settings → Environment variable→ New→ After clicking on that you need to enter variable name and variable path.

You’ll see the following screen in the ‘Environment variable’ window.

Once you click on New, you’ll see the following window. Enter ‘Path’ as the variable name. And Enter the path where your jdk has been installed in the variable path

Let’s validate if this is properly installed or not.

To do so, open cmd window and type ‘javac’.

You’ll see a window with all the details of jdk. If you get it, then it is properly installed, if not, then try again.

Step 2: Download Eclipse and Run

You can use this link to download Eclipse.
https://www.eclipse.org/downloads/packages/eclipse-ide-java-developers/keplersr1

Select Eclipse IDE for Java EE Developers and install it.

Once you install it, an eclipse IDE window will open for writing the script and it will look like this.

Step 3: Download TestNG from Eclipse Marketplace

For this, Go to Help→ Eclipse Marketplace

Click ‘install’ on TestNG for Eclipse.

And finish the process.

Step 4: Download Selenium 3.11.0

You can use this link to download: https://www.seleniumhq.org/download/

Step 5: Download Selenium dependency files

Download selenium dependency files for jdk 3.11.0.

Step 6: Create the project

Create a Java project
To create it, go to file→ New→ Other

Select create a Java Project

Enter your project name, I am entering ‘FirstAutomationProject’.
Note: Do not enter spaces in the name of the project

Click Open Perspective

You’ll see that a new Java Project is created at the left side. Now, Click on ‘FirstAutomationProject’. You’ll see src file. Right click on it. Select new→ Other→ Create a new Java Package.

Click Finish.

Step 7: Create a new TestNG class.

Create a new TestNG class under the package newpack. Right click newpack–> New –> Other

Check @BeforeTest and @AfterTest. Once you click on Finish, you’re all set to write your automation script.

A template TestNG code will open up like this.

Step 8: Import Selenium Jar Files in dependency files

Right click on FirstAutomationTest→ Import. Click on’ Add external Jar’ and add the Jar dependency files that you’ve downloaded above.

A template TestNG code will open up like this.

Step 8: Import Selenium Jar Files in dependency files

Right click on FirstAutomationTest→ Import. Click on’ Add external Jar’ and add the Jar dependency files that you’ve downloaded above.

Similarly, import the dependency files that you’ve downloaded from the link provided above.

Import lib files from the zip extracted dependency files.

Select all the files in the lib folder.

Once you import all the files, you’re all set to write the code.

Writing The Code

On the eclipse window that you’re seeing now, write the following code.
We are writing a code in order to verify the title of webpage.

CODE(self explanatory):

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

//comment the above line and uncomment below line to use Chrome
//import org.openqa.selenium.chrome.ChromeDriver;
public class NewTest {
 WebDriver driver;
    [@Test](http://twitter.com/Test)
    public void FirstTest() {
        // declaration and instantiation of objects/variables
     System.setProperty("webdriver.chrome.driver","C:\\Users\\Admin\\Downloads\\chromedriver_win32\\chromedriver.exe");
  driver = new ChromeDriver();
  //comment the above 2 lines and uncomment below 2 lines to use Chrome
  //System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");
  //WebDriver driver = new ChromeDriver();

        String baseUrl = "[https://www.lambdatest.com](https://www.lambdatest.com/?utm_source=devto&utm_medium=organic&utm_campaign=apr06_sd&utm_term=sd&utm_content=)/";
        String expectedTitle = "LambdaTest - Perform all your tests on cloud";
        String actualTitle = "";

// launch Chrome and direct it to the Base URL
        driver.get(baseUrl);

// get the actual value of the title
        actualTitle = driver.getTitle();

/*
         * compare the actual title of the page with the expected one and print
         * the result as "Passed" or "Failed"
         */
        if (actualTitle.contentEquals(expectedTitle)){
            System.out.println("Test Passed!");
        } else {
            System.out.println("Test Failed");
        }

        //close Fire fox
        driver.close();

    }

}

After writing the code, save it and right click on ‘New Test.java’ → Run as→ TestNG Test.

Once you click on it, you’ll see a chrome browser window opening the website that you’ve entered in your code to test. And it will automatically close as soon as the test is completed and in the output section below, you’ll see ‘Test Passed’ as the status of your test on the console below.

With this, you have run your first automation test in TestNG using a local webdriver.

To verify the title of a given webpage matches the one already specified.

With TestNG certification, you can challenge your skills in performing automated testing with TestNG and take your career to the next level.

Here’s a short glimpse of the TestNG certification from LambdaTest:

Executing Cross Browser Automation Testing With TestNG & Selenium Using Remote WebDriver At LambdaTest

So far, you have noticed how to run a TestNG script using a local webdriver. That is all easy and quick, however, using a local webdriver for performing automation testing with selenium will not provide you with a variety of browsers to test your website or web app on! You can only perform your testing on the browsers that are installed in your local machine. Considering the abundance of browsers on the internet, it could be nearly impossible to have your website test over every web browser through your local machine. This is where cloud testing plays a crucial part. LambdaTest is a cloud-based cross browser testing tool which offers you to run your Selenium scripts using a remote webdriver. This remote webdriver would allow you to perform your test on over 2000+ browsers and browser versions supported by LambdaTest Selenium grid. LambdaTest also allows you to perform a test on your locally hosted web apps or web pages through an SSH tunnel. This way you don’t need to install an excessive number of browsers on your OS for higher coverage of test results.

Executing A Single Instance In LambdaTest Using TestNG

A couple changes in your code is all that you would need for running your Selenium test script on LambdaTest Selenium grid. Here we will take a look at a different example to help you demonstrate the LambdaTest Selenium grid.

Note: SkipException happens when user defined to skip a test then it throws SkipException. Test status will be considerd by the result of isSkip() Method.

We will be running a script of a simple To Do list app. In this list, our code will be marking 2 items as done, add a list item and will display the total count of pending items.
You can find the below code on our GitHub repository as well.

import org.openqa.selenium.By;
import org.openqa.selenium.Platform;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.Assert;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;
import java.net.MalformedURLException;
import java.net.URL;

public class TestNGTodo{
     public String username = "YOUR_USERNAME";
    public String authkey = "YOUR_ACCESS_KEY";
    public static RemoteWebDriver driver = null;
    public String gridURL = "[@hub](http://twitter.com/hub).lambdatest.com/wd/hub";
    boolean status = false;

    [@BeforeClass](http://twitter.com/BeforeClass)
    public void setUp() throws Exception {
       DesiredCapabilities capabilities = new DesiredCapabilities();
        capabilities.setCapability("browserName", "chrome");
        capabilities.setCapability("version", "70.0");
        capabilities.setCapability("platform", "win10"); // If this cap isn't specified, it will just get the any available one
        capabilities.setCapability("build", "LambdaTestSampleApp");
        capabilities.setCapability("name", "LambdaTestJavaSample");
        capabilities.setCapability("network", true); // To enable network logs
        capabilities.setCapability("visual", true); // To enable step by step screenshot
        capabilities.setCapability("video", true); // To enable video recording
        capabilities.setCapability("console", true); // To capture console logs
        try {
            driver = new RemoteWebDriver(new URL("https://" + username + ":" + authkey + gridURL), capabilities);
        } catch (MalformedURLException e) {
            System.out.println("Invalid grid URL");
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }
    }

    [@Test](http://twitter.com/Test)
    public void testSimple() throws Exception {
       try {
              //Change it to production page
            driver.get("https://4dvanceboy.github.io/lambdatest/lambdasampleapp.html");

              //Let's mark done first two items in the list.
              driver.findElement(By.name("li1")).click();
            driver.findElement(By.name("li2")).click();

             // Let's add an item in the list.
              driver.findElement(By.id("sampletodotext")).sendKeys("Yey, Let's add it to list");
            driver.findElement(By.id("addbutton")).click();

              // Let's check that the item we added is added in the list.
            String enteredText = driver.findElementByXPath("/html/body/div/div/div/ul/li[6]/span").getText();
            if (enteredText.equals("Yey, Let's add it to list")) {
                status = true;
            }
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }
    }

    [@AfterClass](http://twitter.com/AfterClass)
    public void tearDown() throws Exception {
       if (driver != null) {
            ((JavascriptExecutor) driver).executeScript("lambda-status=" + status);
            driver.quit();
        }
    }
}

If you look at the configurations selected for running the test. They are our desired capabilities and the code provided for those capabilities is fetched from LambdaTest Capabilities Generator.

The button which says Copy to clipboard will help you to copy all the code based on your selections in just a single click.

That’s all you need for running your first automation test script using Selenium with TestNG at LambdaTest.

Note: DataProviderInvocationException happens when any issues with the invocation of dataprovider method in testng.

Executing Cross Browser Parallel Testing With TestNG Using LambdaTest

Now let us execute a single test on multiple configurations. Yes, we are talking about parallel test execution.

In order to execute parallel testing, you must generate a testng.xml file along with a test case which would make use of the below parameters:

org.testng.annotations.Parameters

Here is an example of parallel testing.

import org.openqa.selenium.By;
import org.openqa.selenium.Platform;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.Assert;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;
import java.net.MalformedURLException;
import java.net.URL;


public class TestNGTodo {
     public String username = "YOUR_USERNAME";
    public String authkey = "YOUR_ACCESS_KEY";
    public static RemoteWebDriver driver = null;
    public String gridURL = "[@hub](http://twitter.com/hub).lambdatest.com/wd/hub";
    boolean status = false;

    [@BeforeClass](http://twitter.com/BeforeClass)
    [@org](http://twitter.com/org).testng.annotations.Parameters(value={"browser","version","platform"})
    public void setUp() throws Exception {
       DesiredCapabilities capabilities = new DesiredCapabilities();
        capabilities.setCapability("browserName", "chrome");
        capabilities.setCapability("version", "70.0");
        capabilities.setCapability("platform", "win10"); // If this cap isn't specified, it will just get the any available one
        capabilities.setCapability("build", "LambdaTestSampleApp");
        capabilities.setCapability("name", "LambdaTestJavaSample");
        capabilities.setCapability("network", true); // To enable network logs
        capabilities.setCapability("visual", true); // To enable step by step screenshot
        capabilities.setCapability("video", true); // To enable video recording
        capabilities.setCapability("console", true); // To capture console logs
        try {
            driver = new RemoteWebDriver(new URL("https://" + username + ":" + authkey + gridURL), capabilities);
        } catch (MalformedURLException e) {
            System.out.println("Invalid grid URL");
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }
    }

    [@Test](http://twitter.com/Test)
    public void testSimple() throws Exception {
       try {
              //Change it to production page
            driver.get("[https://4dvanceboy.github.io/lambdatest/lambdasampleapp.html](https://4dvanceboy.github.io/lambdatest/lambdasampleapp.html)");

              //Let's mark done first two items in the list.
              driver.findElement(By.name("li1")).click();
            driver.findElement(By.name("li2")).click();

             // Let's add an item in the list.
              driver.findElement(By.id("sampletodotext")).sendKeys("Yey, Let's add it to list");
            driver.findElement(By.id("addbutton")).click();

              // Let's check that the item we added is added in the list.
            String enteredText = driver.findElementByXPath("/html/body/div/div/div/ul/li[6]/span").getText();
            if (enteredText.equals("Yey, Let's add it to list")) {
                status = true;
            }
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }
    }

    [@AfterClass](http://twitter.com/AfterClass)
    public void tearDown() throws Exception {
       if (driver != null) {
            ((JavascriptExecutor) driver).executeScript("lambda-status=" + status);
            driver.quit();
        }
    }
}

Now let us generate a tesng.xml file where we will be declaring basic test configurations such as browser, browser version, OS etc.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "[http://testng.org/testng-1.0.dtd](http://testng.org/testng-1.0.dtd)">
<suite thread-count="3" name="LambaTestSuite" parallel="tests">

  <test name="WIN8TEST">
  <parameter name="browser" value="firefox"/>
  <parameter name="version" value="62.0"/>
  <parameter name="platform" value="WIN8"/>
    <classes>
      <class name="lambdatest.TestNGTodo "/>
    </classes>
  </test> <!-- Test -->

  <test name="WIN10TEST">
  <parameter name="browser" value="chrome"/>
  <parameter name="version" value="70.0"/>
  <parameter name="platform" value="WIN10"/>
    <classes>
      <class name="lambdatest.TestNGTodo "/>
    </classes>
  </test> <!-- Test -->
  <test name="MACTEST">
  <parameter name="browser" value="safari"/>
  <parameter name="version" value="11.0"/>
  <parameter name="platform" value="macos 10.13"/>
    <classes>
      <class name="lambdatest.TestNGTodo"/>
    </classes>
  </test> <!-- Test -->

</suite>

Kudos! That is all you need for successfully executing parallel automated tests using Selenium with TestNG on LambdaTest.

Nothing matches the feel you get after doing something new. So, feeling good after executing your first automation script? Let us know your experience in the comment section below.

Test a SignUp Page: Problems, Test Cases, and Template

Deeksha Agarwal — Tue, 05 Apr 2022 10:20:31 +0000

Every user journey on a website starts from a signup page. Signup page is one of the simplest yet one of the most important page of the website. People do everything in their control to increase the conversions on their website by changing signup pages, modifying them, performing A/B testing to find out the best pages and what not. But the major problem that went unnoticed or is usually underrated is testing the signup page. If you try all the possible hacks but fail to test it properly you’re missing on a big thing. Because if users are facing problem while signing up they leave your website and will never come back.

Testers and QA have a huge challenge while testing a signup page because of the varied possibilities around testing it. Many times, the process works fine on one browser but fails on the other. Cross browser compatibility plays a major role here. So, there needs to be followed a proper testing template to make sure you cover all the aspects of testing a signup page.

We have decided to make the task easier for everyone out there. If you follow all the testing instructions, you can be sure that your signup page is working fine across all browser, operating systems, and devices. We have also added a template at the bottom of the blog page. You can download that free and use it for testing your signup page.

Before We Start Testing The Signup Pages

So before moving with the test cases, we need to gather some requirements like:

First Name
Last Name
User Name
Email ID
Phone Number
Password
Confirm Password
Address
Gender

The fields may also vary according to your registration process. I have tried to cover the maximum possibilities for a sign up page.

WorkFlow of Testing a SignUp Page

1- Enter the necessary fields: Name, Email ID, Password, Confirm Password

2- Validate the fields:

Email
Password: Should have 8 to 16 characters, must contain one special character, at least one uppercase character, and have a numerical.
Phone number: Country code is required, only numbers are allowed.

3- Verify the email ID: Send a verification to the entered Email ID after a successful validation

4- should be there on the mandatory fields.

APIs issues in a Signup Page

The major challenge you’ll face here is to test all possible scenarios for all the possible combinations of browsers, devices, and OSes. Because as we know that the sign up process makes use of APIsand API compatibility in browsers needs to be taken care of. So many times, you’ll find that your sign up is working on a browser but when a user tries to do the same from any other browser or device it will fail.

Browser Incompatibility: Authentication Problems in a Signup Page

If a signup page uses strong authentication techniques like second-factor authentication utilizing text SMS verification(or without that), password-less authentication, or encrypted public key then there might be a possibility of cross browser compatibility issues in authentication. Because these techniques make use APIs like web authentication API . The problem that occurs here is that these APIs are unsupported in various browsers.

So authentication will fail on browsers like: IE, older edge versions, older chrome and firefox versions, Safari, iOS Safari, Opera Mini, UC Browser, and Samsung internet. So, if a user tries to signup using these browser, he’ll not be able to finish it off. So, you need to test for these browsers and make sure that the authentication works on all browsers.

Payment APIs in A SignUp Page

There are many websites that ask for payment details or card validation details on signup. So, the registration or sign up may fail if the payment is not processed successfully or the card is not validated.

Developers make use of APIs like Payment Request API for allowing web pages to switch information from the user agent. This is basically done when the user agent provides input before it approves or denies a payment request. This API again comes with some incompatibility issues.

So, you need to test the payment process for all browsers.

Animations API for a Signup Page

While designing a signup page, we make sure of creating a beautiful design by adding some beautiful animations on the buttons for signup. However sometimes this might cause a huge problem.

APIs like Web Animations API that allow you to synchronize and change timings of a web page (animations of DOM elements), sometimes cause compatibility issues in browsers.

As you can see, APIs holds a major portion of compatibility issues in a signup process. So it’s important to test APIs and overall page functionalities as well for a signup page along with the mentioned test cases for a signup process on all browsers and browser versions. LambdaTest platform can help you in making sure that your page is compatible across all browsers.

Test Cases For a Signup Page

Buttons

Check all buttons, radio buttons, checkboxes by clicking on all buttons and see if they are working or not.

Required Fields

Check all required fields by not entering the data and (*) should be shown asking for mandatory field.
Check all required fields by entering the data and validating. Upon entering the all required fields User should be signed up, A successful registration message should be sent along with a mail.

Optional Fields

Check all optional fields by entering the data and a successful registration should happen.
Check all optional fields by not entering the data and again the user should be successfully register without asking for the optional fields.
Check by filling some optional fields and leaving some and the user should be successfully register without asking for the optional fields.

Email Validation

Test for some invalid emails with cases like: without @, without(.), without domain, without alphabets before @. In such cases the user should be prompted to enter a valid email address and the user shouldn’t be signed up.
Test for valid email addresses by entering valid email addresses and then click on signup. User should be registered successfully.
Test for valid but already existing email address. User should not be signed up and prompted to login instead.

Phone number Validation

Test for non-numeric inputs by entering some alphabets or special characters. Since, it’s a number field so it should show an error and ask user again to enter the correct phone number.
Test for numeric inputs by entering a valid number and clicking on signup. The user should be registered successfully.
Test for input with country code applied by entering a number starting from + followed by dial code. User must not get any error message on that.

Password Validation

Check the password for less value than the minimum characters specified. Enter a password of less than 8 characters and then click on signup. The user should see a message to enter a value between 8 to 16 characters and shouldn’t be signed up.
Check the password for more value than the maximum characters specified. Enter a password of more than 16 characters and then click on signup. The user should see a message to enter a value between 8 to 16 characters and shouldn’t be signed up.
Enter a password without alphanumeric characters and click on signup. It should prompt the user to enter a password having alphanumeric characters.
Check by entering an alphanumeric password between 8–16 characters and a special character. It should not give any error and signup should be successful.

User Interface

Tab functionality should work fine. Check by pressing tab button. It should navigate between the fields.
Enter button should act as a substitute for click on signup button and the user should be successfully signed up on pressing enter.
Verify that the cursor should change according to the fields. On text fields, it should be a ⌶, on buttons it should be a hand pointer.

Template of Test Cases for a Sign Up Page

You can also use this test case template for maintaining your test results for a signup page. Download it free and use this as a standard template.

When it comes to performing cross browser testing of a signup page, you can verify all the above test results across all browsers one by one.

For more information on how to perform cross browser testing using LambdaTest read our blog by formulating a perfect cross browser testing strategy and make sure your users don’t bounce back because of some silly bugs.

Happy testing and happy conversions!