Native Vs. Hybrid Vs. Cross-platform

Native vs. Hybrid vs. Cross-Platform: How and What to Choose…

After coming up with an online business idea, many people get confused between the app development approaches. It is crucial for them to decide the right approach from the Native, Hybrid, and Cross-platform mobile app. Having the reason that each type of app has its specification, pros, and cons, this confusion is reasonable. Finding out, what type of app building approach will connect the audience with the brand faster is a real hassle.

You must know choosing the right harvesting ground is essential for successful outcomes. Hence, it is no brainer that choosing the right platform for mobile app development is paramount, and it depends entirely on the nature of your business. 

Nevertheless, many businesses end up making a mistake while choosing the mobile app development approach. It happens even after they were conscious of their business nature. Choosing the wrong development approach causes unproductive software products for your online business.

Therefore, we have curated the difference between Native Vs. Hybrid Vs. Cross-platform to clear this trilemma in the blog. Don’t miss any line!

Native Vs. Hybrid Vs. Cross-platform

Let us initiate with a closer look at each approach.

What Is The Native App Development?

The app developed exclusively for a single platform using a native-to-the-operating-system language is a Native App. For instance, to develop a Native app for the Android platform, Java or Kotlin, likewise, for the iOS Native App, Objective-C or Swift can be used.

Native App Development

Native apps acquire all possible advantages of the device and the operating system’s features. The apps leverage direct access to the hardware of the devices such as GPS, Camera, Microphone, offline access, and many more. As a result, they render high performance and better user experience.

Well, going native is a dream of many product owners, but not all can afford it. The reason is, to run the app on multiple platforms, it requires developing and maintain an app for each platform separately. And it costs an arm and a leg to develop a Native app for multiple platforms to many businesspeople.

So, When Should You Develop A Native App?

Having said that to develop a Native app, be prepared for the development team and the cost to increase twofold, And so, the time to market. When there is no rush to market your business app and no budget constraint, you can opt for a Native app.

Native apps are a future-proof investment. They are secured, user-friendly, and lighting faster than other apps. If your business obliges to serve the audience well, you should go with Native app development.


  • For iOS: XCode, AppCode, Atom
  • For Android: Android Studio, Android IDE, Intellij IDEA

App examples:

  • GPS, Pinterest, SwiftKey, any preset apps in iOS

What Is Hybrid App Development?

A blend solution that consists of both native and web solutions. Developers embed the code written with web development languages (HTML, CSS, and JavaScript) into a native app using plugins like Apache Cordova or Ionic’s Capacitor. The plugin system allows developers to access the native features of platforms.

Hybrid App Development

Hybrid applications deploy on platforms and can download the same as a native app. Hybrid mobile apps run from within a native app and own embedded browsers with the help of WebKit used by platforms. For example, Android uses WebView, and for iOS, there is WKWebView that displays our Hybrid app.

Hybrid app development is quite a time savior and cost-effective than native apps. You can write the code once and use it for multiple platforms. It renders user experience and performance close to native apps. However, it is a challenge to achieve a great UX and navigation pattern from a visual perspective.

So, When Should You Develop A Hybrid App?

Adopting a Hybrid App Development approach can be a pilot solution for emerging startup businesses. High development speed and cost-effective nature make this approach ideal for startups. If UX and performance is not a priority for the app, it would be the best solution than a native application.

  • Tools 
    • Ionic, Apache Cordova, Visual Studio 
  • App examples
    • JustWatch, NHS, Airbus Helicopters 

What Is Cross-Platform App Development?

Many people mistake that hybrid and cross-platform are the same. But the only similarity between both types of the app is the “code shareability.” The cross-platform app approach also allows developers to write code once and reuse for different platforms. 

Cross-platform App Development

It is the best approach for low-cost custom apps with secure, stable, and easy to maintain and iterate features. Many cross-platform app development frameworks are there that help to achieve the native app-like feel and user experience. 

Talking about performance, then it depends on the framework you choose for your cross-platform app development. However, they offer close to native UX, easy implementation, and cost-effective development. The approach can be said to be better than Hybrid, but still Native remains, a King.

So, When Should You Develop A Cross-platform App?

The business needs to target audiences on different platforms at the same time. And the company has a limited budget, but it requires a satisfactory app performance, so cross-platform is an ideal approach. 

To achieve native experience and look at low cost without opting for the long Native app development approach.

  • Tools
    • Flutter, React Native, Xamarin 
  • App examples
    • Facebook Ads Manager, Zipcar 

After looking through each approach, you might like to see a battle of Native, Hybrid, and Cross-Platform. So, let’s get to the arena, it may change your opinion towards these approaches.


In the Native approach, there is no limitation in terms of app performance and speed. It enables developers to use advanced features including Access USB input, complex networking, memory management, etc. The unmatched user interface will update as the operating system updates over time, in the Native approach.

Hybrid has limited access to device and OS features. Cross-platform has limitations but less than Hybrid, although it depends on the framework you choose. 

In the battle of performance, no one can match the Native app development.


What is your stipulated budget, and how much you can extend for your app development is essential. If you have limited funds, it would be out of your budget to develop a native app for iOS and Android both. For the best, you can focus on developing one Native app at a time.

On the contrary, site, even when you have a big budget, it is not mandatory to opt for Native. You can have a low-cost app development with a Hybrid or Cross-platform to satisfy your specific needs. 

Time to Market

It is another significant point. How soon you want the app to be live for your audience is crucial to decide. Each approach takes a different amount of time to develop and deploy the app. Native mobile apps, comparatively, are more time-consuming than others. If your priority is to rule over your competitors, Hybrid and Cross-platform are undisputed winners.


The user retention rate entirely depends on the application of user experience and interface. If the app has poor user experience, users are more likely to abundant the app after using it once. To impress the users and hook them on the app, native application development is beyond compare.

Even so, using the cross-platform frameworks such as Flutter or React Native is better than any Hybrid framework. Still, if we compare cross-platform vs. native, the winner will be the same, Native.


If you want to allow your users to relish the functionalities linked to devices’ benefits, then there is no more perfect approach than Native. The benefits consist of fingerprint authentication, camera, scrolling, navigations, etc. It is not Hybrid’s cup of tea to implement these functionalities to the fullest extent.

It is possible to achieve cross-platform up to 90-95% using React Native or Flutter. Nevertheless, it will require native code to implement some sensors as and when required as Native has no limitation in this matter.

Native Vs Hybrid Vs Cross-platform

After combat, it is crystal clear that the Native dev approach is exceptional and unmatchable. However, not every business wants to acquire Native app development, you should study the below topics, before getting started.

Best Practices to Choose the Right Development Strategy for An App to Succeed

  • Target Group of the app user
  • The preferable way of users to access the application
  • Foreseen the required updates
  • Measure the level of complexity of the functionalities
  • The need for native functionalities (devices’ and OS’s features)
  • The level of UI/UX required to maintain in the app
  • Development resources (available & affordable)


You must have seen native apps are upmarket in the app development sector that makes it a king. Yet, let us not forget that the choice altogether relies on the business nature. Apps such as games, B2B, and content distribution apps usually developed as a cross-platform. While apps that require specific features are meant to be Native. 

Though, business people must choose an approach that matches the requirements, needs, as well as the targeted audience to create a heart-winning app. 

Source link

Is there smarter way than this?

Is there smarter way than this?

Is there smarter way than this?


I'm dealing with a service web where clients can purhase/order multiple products that are within categories and sub-categories. For now, I have a search function which they can use to focus on what they want; however, quite a few times users do not know what they want so I have an accordion-like way to show these products as shown in the picture.

I was wondering if you have any ideas how to enhance this. Thanks!

submitted by /u/SnowHow

Source link

Screenshot taken from the Panic website showing bright pink text against a stark black background.

The Expanding Gamut of Color on the Web

CSS was introduced to the web all the way back in 1996. At the time, most computer monitors were pretty terrible. The colors of CSS — whether defined with the RGB, HSL, or hexadecimal format — catered to the monitors of the time, all within the sRGB colorspace.

Most newer devices have a wide-gamut display. A gamut is the range of colors that can be displayed. A wide-gamut display is capable of showing more colors than sRGB. They use the Display P3 colorspace. (There’s also Rec.2020, an even larger colorspace, but that’s pretty rare and not currently worth thinking about.) As Lea Verou of the CSS working group put it, “Our websites are washed out because screens advanced faster than CSS Color did.” If we want to make full use of the range of colors that the majority of screens are capable of displaying, we need to use new CSS colors formats: lab, lch or display-p3.

Examples in the wild can be found on the website of Panic (creators of the once popular Coda text editor and the still very popular Untitled Goose Game) or the marketing site for a product called Playdate. They both make use of strikingly vibrant and intense colors that are uniquely vivid by making use of display-p3.

Screenshot taken from the Panic website showing bright pink text against a stark black background.
Panic’s website features an eye-catching shade of pink.

To get some idea of the range of colors that are missing from sRGB, check out the following Pen. The inner boxes contain a color beyond the sRGB gamut. The outer boxes show that color clamped to the sRGB color gamut (meaning the nearest equivalent color that a browser is capable of showing without using display-p3, lab, or lch). (Note that support is currently limited to Safari users.)

The color picker in Safari Technology Preview helpfully shows which colors lie outside of the sRGB color gamut.

Screenshot of a color picker going from bright green to black with a light curved line signifying the point where colors go past the typical sRGB range.
Any color above or to the right of the white line lie outside of the sRGB gamut

A tale of new syntaxes

Before jumping into the syntax for lab(), lch(), and the color() function, let’s take a look at the new rgb() and hsl() syntaxes (which are supported in all web browsers, minus Internet Explorer).

Type Old Syntax New Syntax
RGB rgb(0, 128, 255) rgb(0 128 255)
RGBa rgba(0, 128, 255, 0.5) rgb(0 128 255 50%)
HSL hsl(198, 28%, 50%) hsl(198 28% 50%)
HSLa hsla(198, 28%, 0.5) hsl(198deg 28% 50% / 50%)
Source: @mathias 

In the older syntax, each number is comma separated: rgb(200, 100, 20);. Commas are no longer necessary, so the space separated value rgb(200 100 20); is valid. To specify transparency, we can now use rgb(200 100 20 / 50%) rather than using  rgba() or hsla(). There’s no real benefit to the newer syntaxes but it’s worth looking at because they match the syntax for lch(), lab() and color()

Type Syntax
Lab lab(56.29% -10.93 16.58 / 50%)
color() color(sRGB 0 0.5 1 / 50%)
LCH lch(56.29% 19.86 236.62 / 50%

lab(), lch() and color() always use space separated numbers (no commas allowed) and a forward slash followed by a percentage to specify transparency. Let’s take a look at how they work.  

The CSS color() function and display-p3 colorspace

The color() function allows a color to be specified in a particular colorspace (rather than using the sRGB colorspace used by rgb(), hsl(), or hex). The colorspace we need to specify in order to use wide-gamut color is display-p3, which uses three numeric values, representing the red, green, and blue channels of the color: 1 0 0 is total red, 0 0 1 is total blue, and 0 1 0 is total green.

background-color: color(display-p3 1 0 0.331); /* vibrant pink color */

At the time of writing, display-p3 is the only way to access high-gamut colors, having been supported in Safari since 2017. However, lab() and lch() will be better options once they are implemented (Chrome and Safari are currently working on it). Here’s a take from Lea Verou

display-p3 is not perceptually uniform, and is difficult to create variants (lighter or darker, more or less vivid etc) by tweaking its parameters. Furthermore, it’s a short-term solution. It works now, because screens that can display a wider gamut than P3 are rare. Once hardware advances again, color(display-p3 ...) will have the same problem as sRGB colors have today. LCH and Lab are device independent, and can represent the entire gamut of human vision so they will work regardless of how hardware advances.

A better lightness: Lab and LCH

You may have seen articles around the web arguing that HSL is easier to reason about than RGB or Hexadecimal values. 

Here’s Chris Coyier in 2015:

The real appeal of HSLa is that it makes more intuitive sense what changing the values will do to the color. Increasing the second value will increase the saturation of that color. Decreasing the third value will decrease the lightness of that color. That makes creating your own color variations on the fly way easier.

While HSL might be easier to understand than hexadecimal or RGB, it’s far from perfect. The way it calculates lightness simply doesn’t match human perception. According to HSL, hsl(240deg 100% 50%) and hsl(60deg 100% 50%) have the same lightness, 50%. Let’s compare the two.

To the human eye, the blue looks darker. As Brian Kardell puts it: 

Doing things like mixing colors, lightening, darkening, can be done well only if they include a sense of how our eyes really work rather than how machines like to think about storing and displaying.

Here’s a visual example from Lea Verou that demonstrates the superiority of Lab/LCH over HSL. She comments

A trick for aesthetically pleasing gradients of the same color at different lightnesses is to convert to Lab, vary the L instead, and then convert back to HSL/RGB.

“The perceived brightness of all of the hues in a spectrum with the same saturation and lightness. […] It’s quite clear they’re different.” —Brian Kardell (Image: Rob Waychert)

Lab and LCH both use the CIELAB colorspace which is designed to align with human vision. If you give two colors the same lightness value, they appear to the human eye to have the same lightness, regardless of their hue.


background-color: lab(40% 83 -104); /* a shade of purple */

The L in lab() stands for lightness and is written as a percentage (which can go up to 400% for extra bright white, but will generally be between 0% and 100% ). A and B don’t stand for anything — they’re color channels. A is a numerical value between green (negative values) and red (positive values) while B is a numerical value between blue (negative values) and yellow (positive values). Lightness is pretty easy for us to understand. The red/green value and blue/yellow value, however, aren’t exactly intuitive. LCH is probably a better alternative.


background-color: lch(69% 56 244); /* a shade of blue */

lch() is the most human-readable of the new color values. L again stand for lightness (and works in exactly the same way), C is for chroma, and H is for hue. Chroma is largely analogous to saturation, but it can also be thought of as the color intensity or vibrancy. Unlike the other new color formats, you can actually predict the sort of effect changing these individual values will have — its similar to HSL in this way. The best way to get your head around it is to try out this LCH color picker.

Defining fallbacks 

We have two kinds of support to think about: browser support for the new CSS color values and the ability of screens to display these colors.

Falling back to the closest matching sRGB value for browsers that don’t support color functions is easy and exactly like we’re used to defining fallback properties:

.pink-text {
  color: rgb(255, 0, 79); /* Will be used as a fallback */
  color: color(display-p3 1 0 0.331); /* Will be used if supported */

The second line of code in the example above will be ignored if the browser doesn’t understand it and the rgb() value will be used instead, thanks to the cascade. It would be laborious to type out two lines of CSS every time you want to specify a color. CSS variables are a great way to deal with this. In this example we’ll use @supports to tell if the browser has support for color functions in CSS:

/* */
:root {
  --bright-green: rgb(0, 255, 0);

/* Display-P3 color, when supported. */
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --bright-green: color(display-p3 0 1 0);

header {
  color: var(--bright-green);

If the color is particularly important to your design, you could utilize a background-image as most browsers do support high-gamut colors in images.

@supports not (color: color(display-p3 1 0 0.331)) {
  @supports (-webkit-background-clip: text){
    .pink-text {
      background-image: url("pink-P3.png");
      background-size: cover;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

.pink-text {
  color: rgb(255, 0, 79);
  color: color(display-p3 1 0 0.331);

There is a PostCSS plugin that converts lab() and lch() functions to rgb(). If you’re into Sass there is a tool from Miriam Suzanne called Blend.

A media query for color

@supports tells us whether the browser supports the relevant CSS syntax. What it doesn’t tell us  is whether a user’s monitor can actually display certain color values. If a monitor doesn’t support high-gamut color, the screen will display the nearest equivalent sRGB color. This means all monitors are catered for without writing any extra code.

However, if you’d rather choose the fallback color manually yourself rather than let the browser calculate one for you, you can pass a second color value to the color()  function. This would, however, require browser support for the color function (but support for the second argument hasn’t landed in any browser yet).

background-color: color(display-p3 1 0 0.331, #f54281);

Should you need greater control to do something fancy, the Media Queries Level 4 spec brings a new color-gamut media query that can help us here.

@media (color-gamut: p3) { 
  /* Code to run only on hardware that supports P3 color */

In this example, we are obviously checking for P3 support, but we could also check for the rec-2020 colorspace we alluded to earlier, which has an even wider gamut than P3. The number of screens supporting rec-2020 is currently minimal and only include high-definition televisions, meaning they won’t be a common target for developers in the near future. You can also check for sRGB support, but that is almost all monitors nowadays. The color-gamut query, on the other hand, has reasonably good browser support at the time of writing.

Sidenote: dynamic-range media query

In the Safari 13.1 release notes, the dynamic-range media query is is used to conditionally apply a P3 color.  Apparently, that’s not a good use case. According to Florian Rivoal (editor of the Media Queries specification), this query is designed to be used for video:

[S]ome screen can show ultra-bright lights for brief amounts of times, that are used in videos for things like sparks, direct sunlight, etc. This is much brighter than white, and isn’t meant to be used with static images. It would be uncomfortable, and would also damage the screen.

One more sidenote: Design tool support

Unfortunately popular web design tools like Figma, Sketch and XD do not currently support Lab, LCH or P3 colorspaces. Photoshop, however, does have a Lab color picker.

There we have it! CSS colors are expanding at a time when screens support more colors than ever. It’s an exciting time for color nerds out there!

Source link

Jest Tutorial for Selenium JavaScript Testing With Examples

Jest Tutorial for Selenium JavaScript Testing With Examples

As a developer, I know for a fact that I have to constantly brush up myself with new updates. This means that not only I have to keep learning more about the frameworks and language I work with. But also to look for new frameworks that give me an edge over others. One such survey that I am always looking forward to as a developer is the ‘StateofJS’. It is revered by all the JavaScript developers as a key source of information. ‘StateofJS’ provides key insights into the major trends in front-end, back-end, testing, etc. As per StateofJS 2019, Jest has been the most interesting and satisfying framework for JavaScript testing.

Being a fan of Selenium test automation, I was curious to get my hands on Jest for Selenium JavaScript testing. I wanted to quickly validate my recent code changes and Jest was a big help in reducing my unit testing efforts. Which is why I thought of sharing what I learned with you, so you can go ahead and automate your unit test cycles.

In this Jest testing tutorial, I am going to help you execute Selenium JavaScript testing through the Jest framework. We will start off with basics to Jest, its advantages, and then we will hop over to the practical demonstration where we will execute our first Selenium test automation script for Jest and get our hands dirty on this framework.

What Is Jest?

Developed by Facebook, Jest is an open-source testing framework built on JavaScript, designed majorly to React and React to Native based web applications. We generally observe that unit tests for the frontend layer are not much suitable as it requires a lot more configuration to be done which can be complex at times. This complexity can be reduced to a great extent with the Jest framework.

Moreover, Jest can be used to validate almost everything around JavaScript, especially the browser rendering of your web-applications. Jest is a preferred framework for automated browser testing too and this makes it one of the most popular and renowned Javascript testing libraries framework!

Jest also provides an excellent blended package of an assertion library along with a test runner and a built-in mocking library. The feature that makes it stand out is its simplicity and that is what makes it compatible to test any JavaScript Library Projects such as AngularJS, Vue JS, Node JS, Babel, and TypeScript. 

Another great feature that it offers is snapshot testing, which basically helps us to get a test of the delta changes of the web-applications that are transformed after a particular time. Additionally, Jest also has built-in support for code coverage which can generate reports to figure out the areas or the part of the code that is not covered as a part of the test execution. Now that we’ve covered what is Jest in this Jest tutorial, let’s explore why you should use Jest for Selenium test automation.

Why Use Jest For Selenium JavaScript Testing?

In the world of Selenium JavaScript testing, there are many automated frameworks that are used for cross browser testing. So why Jest? Well, here are a few killer points that make Jest better than other test frameworks. Some of them are:

Speed and Performance – The jest framework is fast when it comes to executing the test cases. Not only it boosts up the entire test suite, but it also offers great efficiency in the watch mode that can be enabled in this framework.

Pre-commit hooks – Jest framework offers pre-commits hooks which are basically the ability to execute only those sets of test cases that are significant in the current run or the ones that are changed after the previous commit. That way, we don’t have to wait for the execution of all other test cases. These tests are popularly known as Snapshot testing & are useful in reducing the regressions testing efforts.

Complete Package – The framework comes with more or less with all the required features. These built-in modules provide good support for plugins and there is no need to download any other third party executable like mocha or cucumber etc. to perform certain activities. In case, if we require to add any other library with the Jest framework, they are easily configurable, and we can choose which module to include so that there are no issues with compatibility.

Easy to Migrate – Any current test project can easily be migrated and switched to use the Jest framework programmatically without any issue or code interaction with the use of code mods module.

Added Features and Configurations – The framework is not just an ordinary and basic test runner but on the other hand it also offers some of the advanced features such as ability to auto mock modules, setup coverage thresholds, module mappers. This includes the support from multiple projects in the same runner and customer resolvers such as babel and webpack.

Other than the ones listed above, here are some pros of using Jest framework by the StateofJS survey.

I’m Jest Getting Started! – Installation, Configuration, and Prerequisites

Before I start with, how to write our first Selenium test automation script with Jest. There are certain basic prerequisites and installations to get started with this Jest testing tutorial for Selenium JavaScript Testing. Below are some of the libraries and packages required to be installed on the system in order to run Jest test scripts.

  • Node JS and Node Package Manager (npm) : Node JS can be installed either using the npm manager: or directly using the Windows Installer binary from the web site here.

  • Selenium Web Driver: The Selenium web driver is required as a dependency for the Jest Module and should be installed in the root directory. The latest version of the selenium web driver can be installed using the npm command as shown below:

 $ npm install selenium-webdriver 

To install the latest version navigate to the npm command-line tool, and initialize the npm using the below command :

 $ npm init --y 

Then, install the Jest module using npm using the below commands. 

 $ npm install -g Jest  

 $ npm install --save-dev jest 

‘-g’ : It indicates the npm to install the module globally, and allows us to access and use the module like a command-line tool and does not limit its use to the current project.

           ‘–save-dev’ It indicates the npm to place the Jest executable in the bin folder of the root directory i.e. ./node_modules/.bin folder

 $ npm install --save-dev jest 

You will now be able to run the commands in our command line using the Jest keyword.

  • Java – SDK:  Since Jest is a Selenium test framework and Selenium is built upon Java, and so there is also a  need to get the installation done for the Java Development Kit ( preferably JDK 7.0 or above ) on the system and then configure the system with the JAVA environment.

  • Browser Driver: This npm command installs the suitable driver required to trigger the browser and place the executable inside the root directory.

 $ npm install -g chromedriver  

Now that you’ve set up and completed all the requirements in this Jest testing tutorial, let’s move on to how to run your first Selenium test automation script for Javascript testing.

Running Your First Jest Script For Selenium JavaScript Testing

After the initial setup and configurations are done, let’s write our first Jest script for Selenium JavaScript testing. I’ll start by creating the project and naming the directory as jest_test and initialize the test project by navigating to the directory through the command line and executing the command 

     $ npm init 

This will create a base package.json file will all the basic project configuration which will be referenced in our test scripts. Finally, I’ll create a subfolder inside it that will contain our test script name single_test.js. Our initial project hierarchy will look like this:

Now, let’s have a look at all the files, their content, and their purpose in the project, you may copy-paste the content into your local project files.


This file contains all the project configuration and dependencies required during the project setup. The definitions from this file are used for executing the script.


This file contains all the scripts related features and behavior that are expected in our application. These configurations are internally referenced in the script to implement the required functionality. It offers a lot more features like mocking, coverage, report, etc and you are free to turn on and off the features as and when required.


This is our Jest test script that we will be executing. In this test we will launch a web page and execute certain scenarios.

It is important to check whether the below section is present in our package.json file as this contains the configurations of our test script and hence will be required to execute the tests.

“scripts”: {

    “test”: “jest”,


Now, finally, we can run our test in the command line and execute from the base directory of the project using the below command:

 $  npm test 

The output of the above test is :

Output of test

Code Coverage

Now you can test code coverage report using the inbuilt coverage plugin by executing the command.

  $  npm test --coverage 

Executing this command will generate a detailed report of us for the test case.

Delta Testing and Group Testing With Jest Framework

Let us look at some of the important keywords that you should be aware of when writing our Selenium test automation scripts and performing tests in the Test Driven Development (TDD) environment and then I will explain how we can use them in our tests.

expect: expect helps us verify that the values we specified in our tests meet the conditions specified i.e. a value you would like to check against the value that you were expecting. This can be done with the help of various matches that are available to validate different combinations of things as per the requirement. Some of the matches that we can use with expect function in Jest are : .toBe() , toBeA() , toContain() , toEqual() ,toContainEqual() etc. 

test: It provides what a function should perform and lets us test a unit of the function. For Example test(‘whether a particular attribute is present in the input’) etc.

Delta Testing

With Jest, you can also execute delta testing by running tests in watch mode. This will execute the tests automatically whenever there is a change in code encountered. The watch mode monitors the application for any changes. I will execute our previous tests with the watch mode on and see if it throws an error when the test fails.

For this, we need to execute the command with the –watchAll parameter in the command line.

Group Tests

Let us extend our test further and group our multiple tests to create a test suite. In Jest, multiple tests are grouped into units and are distinguished with the describe() function. It helps by grouping several related tests together.

In the last example, we have performed the automated browser testing by launching a website and performing certain scenarios on them. Here we will also test check whether the input is an anagram. For this, we introduce a new function checkAnagram(). This will constitute the first module. (module1-utils.js) In the other module, we will test for positive, negative, and sum of the values. This will be our second module (module2-utils.js).

So, we will have our directory structure like below, where we will be executing the group test which will internally refer to the module1-utils and module2-utils.




Finally, we will be executing the test script using the command 

$ npm test


$ npm Jest groups_test.js


outputWe can see that we have executed the group of tests in the form of test suites which are internally executing multiple other test cases as we have described using the describe function.

Scalability Issues With Running Selenium Automation On Local Infrastructure

Now in this Jest testing tutorial, we’ll see the scalability issues that might rise by running your selenium test automation scripts on your local setup. You can install Selenium WebDriver in your local systems and can proceed with the execution of automated test cases. However, there are certain drawbacks of using Selenium Grid in a local setup.

  • First, since it is in our local workspace, it requires us to manage and set up the underlying infrastructure required for the test,  we cannot focus much on our testing strategy. 

  • The initial setup of the Selenium Grid can be tedious especially when there is a need for multiple node servers. There can be issues with the performance majorly when parallel-group tests are about to be executed. 

  • Also, when performing cross browser testing our local system may not be equipped with all the different versions of browsers installed.

  • The same limitation arises when dealing with operating systems as some applications might be specifically designed for a particular operating system and hence requires a specific environment to run.

Choosing Cloud based Selenium Grid over Local Setup

Moving ahead with our Jest testing tutorial, we need to figure out a way for this limitation, this is where the online Selenium Grid plays a vital role and comes to the rescue. By performing parallel testing on Cloud-based Selenium Grid there is no need to install and manage unnecessary virtual machines and browsers for Automated Cross browser Testing. It provides real browsers running with all major operating systems running. Further, it also helps reduce our test cycles and hence boost our market-ready delivery.

Since Lambda Test also provides integration with Jest, we will look at how to run our test script on its cloud platform. In order to start executing automated testing for our application, we would just need good Internet connectivity and a simple and free sign up on the Lambda Test platform.

Executing Jest Script Using Cloud Selenium WebDriver On The Cloud Based Selenium Grid Lambda Test

Now that you have an idea about various offerings of the cloud grid in terms of boost in productivity, log analysis and wider test coverage. I’ll now execute a sample test script on the online Selenium cloud grid platform for a better understanding. The process is pretty straightforward and it just needs a few additions in configurations, which will allow our script to connect to the Cloud platform.

To get started we would require generating a capability matrix that allows us to choose from various combinations of environments available and specify the environment we would like to run our tests on.

Here is the link to visit the Selenium desired capabilities generator.

So, in our case the capabilities class will look similar as below:

Next and the most vital thing for us is to get our access key token which is basically a private key to connect to the platform and execute automated tests on Lambda Test. This access key is unique for every user and it can be fetched and regenerated from the individual user  profile section of the user account as shown below.

Alternatively, the access key, username and hub details can also be fetched from the Automation dashboard as shown in the image screenshot below:

Executing Our First Script on Cloud Setup

Here, our script will connect us to a cloud Selenium Grid platform, and I will be executing our test on the chrome browser. In this test case, I will open the platform to perform certain operations on it such as validating the content , taking a screenshot etc. So, our directory structure will be pretty simple as below:


Now since our test scripts are ready to be executed in the cloud grid , the final thing that we are required to do is to run the tests from the base project directory using the below command:

$ npm test

This command will validate the test cases and execute our test suite across all the test groups that we have defined.

Below is the output on the command line:


Now, if I open the Lambda Test platform and navigate to the automation dashboard you can see that the user interface shows that the test ran successfully and passed with positive results. 

Below is the sample screenshot:

You must be aware now that you can fast track our automated browser testing process for Jest by executing these test cases on an Online Selenium Grid. Some of the best features provided by it are the parallel testing environment, support for programming and coding languages like Java, Python , C etc. along with the test frameworks that are supported with Selenium and allow easy integrations with all the famous CI/CD platforms and the desired capabilities which prove to be efficient in complex use cases. I’d encourage you to execute your first Jest Script both locally and on the cloud Selenium platform.

Wrapping It Up!

Now that you know that Jest is a quick testing framework and is also easy to set up and doesn’t have many complexities. Jest framework is actively used by many organizations to test applications as it is simple to migrate from other testing platforms and provides an all in one package with TypeScript support. The test outcome and the consequences can at once accessed from the command line interface.

Also, the user interface offered by this platform is very interactive and we can leverage the various benefits of Selenium test automation testing both as a beginner and an expert. Hence, it’s a good idea to migrate our Selenium automation tests to cloud infrastructure and increase our test coverage and also cut down on test execution time. This is all we need to know to run our Jest test scripts.

Great! This concludes our Jest testing tutorial and now I hope you are well versed with the Jest framework. But as I just said, this is ‘jest’ a beginning and there’s a lot more to come. There is a lot more still to be learned, and I’d be happy to guide you along the way.

Source link

Help finding good collage references

Help finding good collage references

Help finding good collage references

Hi there, I'm looking for collage references that include images, text, texture, etc. Does anyone have any ideas?

Sort of like this but with less empty space.

Couldnt find a reference/credit citation

submitted by /u/sm_098

Source link

Post image

Is anyone else annoyed with these “Feedback” tabs that have …

I have noticed an awful and annoying trend lately for sites to provide this “Feedback” tab which pretty much always sits above and overlapping to the scroll bar on the right of the screen. The worst part is that it often is programmed to sit above and prioritize over the scroll bar, so click dragging past it or clicking on the scroll bar over it will trigger the button. This totally breaks the scroll bar click-and-drag functionality for those outside of techy/webdev circles (lots of people) who still click and drag or for large pages and etc. I have accidentally clicked this stupid button and have been redirected to some external feedback service probably hundreds of times by now. Even major sites with millions of visitors per day are using this monstrosity of a button (Paypal and Mailchimp come to my immediate thoughts). They could put it in a hundred different places on a page to avoid this. I’m baffled by this widespread page breaker.

Post image

Source link

Get Programmatic Control of your Builds with Netlify Build P...

Get Programmatic Control of your Builds with Netlify Build P…

Today at Jamstack_Conf, Netlify announced Build Plugins. What it does is allow you to have particular hooks for events within your build, like when the build starts or ends. What’s nice about them is that they’re just a plain ‘ol JavaScript object, so you can insert some logic or kick off a library just the way you typically would within your application.

A “Build” is when you give your site to Netlify either via GitHub/GitLab/etc., or by literally just dropping the directory into the interface, Netlify will process all the assets, download and install packages, and generate a static version of the site to deploy to CDNs all around the world.

What the Build Plugin does is give you access to key points in time during that process, for instance, onPreBuild, onPostBuild, onSuccess, and so forth. You can execute some logic at those specific points in time, like this:

module.exports = {
  onPreBuild: () => {
    console.log('Hello world from onPreBuild event!')

You don’t only have to build them yourself, either! You can use build plugins that have been made by the community. There are very interesting ones, such as a11y, Cypress for testing, Inline Critical CSS, and my personal favorite, Subfont, which optimizes fonts for you in a really incredible way (you can watch a video about that).

Enable them through the dashboard through a few button clicks:

If you’d like to learn more, check out the announcement post here! Happy building!

Source link

Post image

Privacy Policy for a Coming Soon Page – DRAFT

I’ve been scouting various privacy policy and it seems like the free ones aren’t really effective, and the ones that are effective are just quite expensive. So I wrote a draft based on the sources I found. I know this sub had suggested a few sources, but none are really for a Coming Soon page.

I’m hoping I could get a second eye on this before I use it for a Coming Soon Page (basic landing page; visitor inputs email that Mailchimp will track; Google Analytics on the site; social media icons available for users to help spread the word).

Not a coder, or a lawyer. First time trying to do a site of any kind and anything related to creating a site. Is this sufficient? Are there things that I am missing or should delete?


Post image
Post image

Source link