Selenium vs Cypress

August 3, 2020

Let's compare Selenium and Cypress.

RequirementSeleniumCypress
Completely open-source and free✅🔲
Works with Chrome✅✅
Works with Firefox✅✅
Works with Edge✅🔲
Works with Safari✅🔲
Works with Internet Explorer 11✅🔲
Works with multiple browser tabs✅🔲
Works with asynchronous web pages✅✅

1. Selenium

Selenium WebDriver is easy to use and there are plenty of resources available online.

It works with all major browsers and the WebDrivers are even maintained by the browser developers themselves.

And it can easily handle complex scenarios which involve iframes and multiple browser tabs.

There are also a number of libraries that are built as a wrapper on top of Selenium, such as NightwatchJS, WebdriverIO and CodeceptJS.

Personally, I would avoid using those libraries since it puts me at a higher risk of getting blocked by issues in their code, since they're not as well maintained as pure Selenium WebDriver.

Endtest is using Selenium to locate elements in Web Applications.

Selenium is just one of the many open-source components that we're using.


2. Cypress

Cypress is a npm package that can be used to create simple tests.

The cross-browser support isn't so comprehensive, but at least there is a beta version working on Firefox.

Dealing with iframes in Cypress requires a lot of hacks that don't always work.

Dealing with multiple browser tabs in Cypress is currently not possible.

The tests created with Cypress tend to be flaky and constantly require workarounds and hacks.

It is promoted as an open source library, but it has a paid product behind it (the Cypress Dashboard service).

Cypress invests a lot in Marketing and that has got them some attention in the last years.

Personally, I would not use it due to the severe limitations.

Conclusion

Selenium is definitely more powerful than Cypress.

The severe limitations of Cypress tend to remind us of the first version of Selenium from 2005, which relied more on JavaScript than webdrivers.

We did adapt the requirements from the comparison table as much as we could.

Endtest vs Ghost Inspector

August 2, 2020

Let's compare Endtest and Ghost Inspector.

RequirementEndtestGhost Inspector
Works for Web Applications✅✅
Works for Mobile Applications✅🔲
Works with Chrome✅✅
Works with Firefox✅✅
Works with Edge✅🔲
Works with Safari✅🔲
Works with Internet Explorer 11✅🔲
Cloud with browsers on Windows machines✅🔲
Cloud with browsers on macOS machines✅🔲
No-Code Technology✅✅
Visual Testing✅✅
API✅✅
Scheduler✅✅
Loops✅🔲
Live Customer Support✅🔲
Email Testing✅✅
Geolocation✅✅
Video recording of test executions✅✅

1. Endtest

Endtest is the leading test automation vendor providing a complete software platform to help organizations efficiently build automated end-to-end tests for Web Applications and Mobile Applications.

You can execute your tests directly on the cross-browser cloud which has all the major browsers on Windows and macOS machines.


2. Ghost Inspector

Ghost Inspector is a product which allows you to record and execute tests for web applications.

Since the technology behind Ghost Inspector is CasperJS, that means that it can only run on Chrome and Firefox browsers.

Currently, there is no possibility to make it run on other browsers such as Safari and Internet Explorer 11.

Ghost Inspector provides a cloud grid with Chrome and Firefox browsers on Linux machines.

Another limitation is that tests will be automatically stopped if the execution takes more than 10 minutes.

Conclusion

Even if these 2 products might seem similar, there are significant differences between them.

Endtest definitely has more functionalities.

We adapted the requirements from the comparison table as much as we could.

Puppeteer vs Selenium

July 31, 2020

Puppeteer and Selenium are both popular, powerful and widely used solutions for automating web applications.

But which one should YOU use?

The answer depends on your specific needs.

Choosing the wrong option could delay or worse, sabotage your automated testing project.

I'll share my own opinion at the end of this article.

Here are some PROS and CONS for both of them.

Puppeteer

PROS

• Faster than Selenium

• Easy to install

• Written and maintained by the Google Chrome devs

CONS

• Works only with Chrome

• The only supported language is Node.js

Selenium

PROS • Works with most browsers

• Multi-language support

• Huge community of users

CONS

• Difficult to run on all browsers

• A bit slower than Puppeteer

To sum it up, Puppeteer is faster than Selenium, but it works only with Chrome, while Selenium works with Chrome, Firefox, Safari, Internet Explorer and Edge.

Now, for my opinion: both solutions are outdated and built with the narrow mindset of developers who refuse to see beyond their code.

It may sound lazy, but I believe that a solution for automated testing should be like a washing machine: it should give me enough flexibility to choose different inputs and settings, but it shouldn't make me pump the water with one hand and spin the drum with the other.

What both solutions are missing

• Video Recording functionality

• Self-Healing element locators

• Integrated Email Testing option

• Computer Vision functionalities

• Automatic Smart Waiting

• Structured results

Other issues with Selenium and Puppeteer:

• Difficult to upload files in a test

• Difficult to deal with iframes

• Difficult to integrate with your CI/CD system

• Difficult to configure Element Load Timeout

If you're looking for a better alternative, try Endtest.

It has Puppeteer's speed, it supports Selenium's browsers AND it has all the features that they're missing.



A Practical Guide for Finding Elements with Selenium

July 31, 2020

This article is for anyone who is using Selenium or Endtest and wants to know the best ways to find elements.

The key here is to find the most stable and reliable locator for each element.

Read More

8 Extremely Useful HTML Tricks

July 31, 2020

HTML has plenty of practical secrets that might come in handy.

But I do want to make sure that the site is working on Internet Explorer and other browsers.

You can use use Endtest to create automated tests and execute them on the cross-browser cloud.

Below are 8 extremely useful HTML tricks.

1. The <figure> tag

This can be used to mark up a photo.

The <figure> element can also contain a <figcaption>:

<figure>
  <img src="https://thepracticaldev.s3.amazonaws.com/i/g84et7kjgp2phal89140.jpg" alt="Swat Kats" style="width:100%">
  <figcaption>Fig.1 - SWAT Kats</figcaption>
</figure>

And this is what it would look like.

2. The <video> tag

This allows you to embed a media player for video playback.

For example, you can upload your video on AWS S3 and use the <video> tag to embed it on your website.

Using YouTube for that might come off as unprofessional.

And Vimeo doesn't allow you to embed your videos without paying. ☹️

You can specify certain attributes, such as width, height, autoplay, loop, controls, etc.



And this is what it would look like.

You can also embed a live stream using getUserMedia() or WebRTC

3. The <picture> tag

This tag helps you display images in a responsive manner, by showing an alternative image version for smaller viewports.

It needs to contain one or more <source> tags and one <img> tag.

The <img> tag will be used only if the viewport doesn't match any of the <source> tags or if the browser does not support it.

<picture>
   <source media="(min-width: 968px)" srcset="large_img.jpg">
   <source media="(min-width: 360px)" srcset="small_img.jpg">
   <img src="default_img.jpg" alt="avatar">
</picture>

4. The <progress> tag

The <progress> tag represents the progress of a task.

The <progress> tag should not be confused with the <meter> tag (which represents a gauge).

<progress value="63" max="100">
</progress>

And this is what it would look like.

5. The <meter> tag

You can use the meter element to measure data within a given range (a gauge).

This can be achieved with min and max values or with a percentage.

<meter value="2" min="0" max="10">2 out of 10</meter>

<meter value="0.6">60%</meter>

And this is what they would look like.

6. The <map> tag

The <map> tag is used to define a client-side image-map.

An image-map is an image with clickable areas.

All you have to do is mention the X and Y coordinates in the elements from the <map>.

This means that you create a map of our Solar System and define areas for each planet and take the visitors to a separate page for each planet they click on.

<img src="solar_system.png" width="500" height="300" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,52,92" href="earth.htm" alt="Earth">
  <area shape="circle" coords="60,48,5" href="mars.htm" alt="Mars">
  <area shape="circle" coords="135,48,12" href="saturn.htm" alt="Saturn">
</map>

7. The contenteditable attribute

This attribute specifies whether the content of an element is editable or not.

<p contenteditable="true">This is an editable paragraph.</p>

And this is what it would look like.

8. Input suggestions

<input type="text" list="planets">
<datalist id="planets">
    <option value="Mercury"></option>
    <option value="Venus"></option>
    <option value="Earth"></option>
    <option value="Mars"></option>
    <option value="Jupiter"></option>
    <option value="Saturn"></option>
    <option value="Uranus"></option>
    <option value="Neptune"></option>
</datalist>

Here it is.

I hope you don't mind that I didn't add any styling.

I prefer to keep things as vanilla as possible in my examples.

Closing thoughts

I think it's really cool that you're looking for HTML tricks, but are you sure your Web Application is working correctly on all browsers and devices?

You can use Endtest to quickly build Automated Tests and execute them on the cross-browser cloud.

You don't even have to code in order to use it.

Check out the docs.

8 Extremely Powerful JavaScript Hacks

July 31, 2020

I love to be efficient.

But users don't care about my optimized code if the site isn't working in their Internet Explorer 11 browser.

You can use Endtest to build automated tests and execute them on the cross-browser cloud.

Below are 8 extremely powerful JavaScript hacks.

1. Replace All

We know that the string.replace() function replaces only the first occurrence.

You can replace all the occurrences by adding /g at the end of the regex.

var example = "potato potato";
console.log(example.replace(/pot/, "tom"));
// "tomato potato"
console.log(example.replace(/pot/g, "tom"));
// "tomato tomato"

2. Extract Unique Values

We can create a new array only with the unique values by using the Set object and the Spread operator.

var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
var unique_entries = [...new Set(entries)];
console.log(unique_entries);
// [1, 2, 3, 4, 5, 6, 7, 8]

3. Convert number to string

We just have to use the concatenation operator with an empty set of quotation marks.

var converted_number = 5 + "";
console.log(converted_number);
// 5
console.log(typeof converted_number);
// string

4. Convert string to number

All we need is the + operator.

Be careful with this one since it only works with 'string numbers'.

the_string = "123";
console.log(+the_string);
// 123

the_string = "hello";
console.log(+the_string);
// NaN

5. Shuffle elements from array

Every day I'm shufflin'

var my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(my_list.sort(function() {
    return Math.random() - 0.5
}));
// [4, 8, 2, 9, 1, 3, 6, 5, 7]

6. Flatten multidimensional array

Simply by using the Spread operator.

var entries = [1, [2, 5], [6, 7], 9];
var flat_entries = [].concat(...entries);
// [1, 2, 5, 6, 7, 9]

7. Short Circuit Conditionals

Let's take this example:

if (available) {
    addToCart();
}

And shorten it by simply using the variable together with the function:

available && addToCart()

8. Dynamic Property Names

I always thought that I first had to declare an object before being able to assign a dynamic property.

const dynamic = 'flavour';
var item = {
    name: 'Coke',
    [dynamic]: 'Cherry'
}
console.log(item);
// { name: "Coke", flavour: "Cherry" }

Conclusion

I think it's really cool that you're looking for JavaScript hacks, but are you sure your Web Application is working correctly on all browsers and devices?

You can use Endtest to quickly create Automated Tests and execute them on the cross-browser cloud.

You don't even have to code in order to use it.

Check out the docs.

Endtest vs Sauce Labs

July 30, 2020

Let's compare Endtest and Sauce Labs.

RequirementEndtestSauce Labs
Works for Web Applications✅✅
Works for Mobile Applications✅✅
Cloud with browsers on Windows machines✅✅
Cloud with browsers on macOS machines✅✅
No-Code Technology✅🔲
Visual Testing✅✅
API✅✅
Scheduler✅🔲
Live Customer Support✅🔲
Email Testing✅🔲
Geolocation✅✅
Video recording of test executions✅✅

1. Endtest

Endtest is a cloud platform that allows you to create, manage and run Automated Tests for Web Applications and Native Mobile Apps (Android & iOS), without having to write any code.


2. Sauce Labs

Sauce Labs is a service that offers you a list of browsers and mobile devices to execute your Selenium and Appium tests.

It simply provides the browsers and mobile devices, you still have to build your internal test automation framework by writing code.

Conclusion

It doesn't actually seem fair to compare these 2 products, since they provide different functionalities.

We adapted the requirements from the comparison table as much as we could.

The target audience for these 2 products is similar, but still different.

Endtest was built for teams who want to build tests faster, without writing any code.

Sauce Labs is mostly for teams who are still trying to stitch together overcomplicated internal test automation framework.

Endtest vs BrowserStack

July 30, 2020

Let's compare Endtest and BrowserStack.

RequirementEndtestBrowserStack
Works for Web Applications✅✅
Works for Mobile Applications✅✅
Cloud with browsers on Windows machines✅✅
Cloud with browsers on macOS machines✅✅
No-Code Technology✅🔲
Visual Testing✅✅
API✅✅
Scheduler✅🔲
Live Customer Support✅🔲
Email Testing✅🔲
Geolocation✅✅
Video recording of test executions✅✅

1. Endtest

Endtest is a cloud platform that allows you to create, manage and run Automated Tests for Web Applications and Native Mobile Apps (Android & iOS), without having to write any code.


2. BrowserStack

BrowserStack is a service that offers you a list of browsers and mobile devices to execute your Selenium and Appium tests.

It simply provides the browsers and mobile devices, you still have to build your internal test automation framework by writing code.

Conclusion

It doesn't actually seem fair to compare these 2 products, since they provide different functionalities.

We adapted the requirements from the comparison table as much as we could.

The target audience for these 2 products is similar, but still different.

Endtest was built for teams who want to build tests faster, without writing any code.

BrowserStack is mostly for teams who are still trying to stitch together overcomplicated internal test automation framework.

10 Ways To Improve Your Automated Tests

July 30, 2020

Should I make a list of everything that needs to be automated?

Should I ask for help?

Sounds familiar?

I know the feeling. I felt the same way.

Read More