Category Archives: JavaScript

Google Puppeteer

Puppeteer : Is it time to ditch Selenium?

Google has introduced a new library based on Chromium’s dev tool protocol. The library grants high-level API to interact with chromium and handle most tasks which you can perform using Chromium dev tools. The library is implemented in node.js and is really easy to get started once you install required packages using the node package manager.

……………………………………………………………………………………………………

Why Puppeteer?

Puppeteer flexes its muscle where selenium misses out. It is not just limited to interactions with the web application under test performing tasks like for e.g. interacting with dom, submitting forms, generating screenshots and pdf of web pages but also in intercepting network activity, throttling CPU and network, generating timeline trace and mocking API amongst some. The puppeteer can be easily be used to write end-to-end automation test suites with the benefit of getting a detailed timeline of the performance of all the assets (images, javascript files and so on).

Engineers can easily switch between headless and non-headless modes. While writing the automation suite, non-headless mode gives a good view of how the browser is interacting with the application under test and helps in debugging; just like in Selenium. But in production, we can execute suite in a headless mode as it reduces execution time and save resources.

……………………………………………………………………………………………………

Is it really that Good?

Yes, it enjoys the goodness of async code execution. You can always perform multiple tasks simultaneously following the latest javascript async await conventions. You can test the behavior of your application under different screen sizes. The network can be throttled on demand to find out how your application will run at low internet speeds. For e.g. if you want to test the error messages in an application when a user loses internet connectivity, puppeteer can easily handle such a scenario. Mocking APIs can also be achieved with utmost ease. For instance, if you want to test your “payment completed” screen but don’t want to go through the payment gateway flow, you can easily perform it with puppeteer by mocking the API response. With a detailed performance matrix, puppeteer can easily be used for performance testing.

So what are the drawbacks?

Google puppeteer supports only Chromium and Chrome out of the box. Third party implementations are available for Firefox and Internet Explorer. But they are experimental as of now and are missing a good chunk of the firepower. The documentation available is minimal as compared to selenium.

Why should you prefer Puppeteer over Selenium?

The targeted audience is the major deciding factor. If it majorly comprises of Chrome users you should go ahead with Puppeteer. Other factors include performing automation tasks which are not possible with selenium, like testing Chrome extensions, mocking API calls and so on. Selenium follows WebDriver protocol and has been from a very long time in the market compared to puppeteer hence itis better documented compared to puppeteer.

……………………………………………………………………………………………………

Conclusion

Puppeteer is a powerful library which has revolutionized the automation testing by overcoming functionalities missing in WebDriver protocol used by Selenium. Although it is still in the early stages, it promises a bright future, backed up as it is by the illustrious Chrome dev tools team.

……………………………………………………………………………………………………

If you have any queries in this field, talk to Mindfire Solutions. For over 19+ years now, we have been the preferred Software Development Partner of over 1000+ Small and Medium-sized enterprises across the globe.

Spread the love
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share
Blazor

Blazor : Will it slay the JavaScript/SPA Frameworks?

It has been a long time since Microsoft allowed support of .NET directly on client-side. The last attempt was with Silverlight which got famous when it launched but due to lack of support from browsers and security concerns it stopped; like what happened to Adobe Flash.

……………………………………………………………………………………………………

What is BLAZOR?

Blazor is an attempt to bring .NET core to the browser directly which allows supported language like C# to run directly on the browser. Blazor allows developing Single Page Application (SPA) very quickly and by using a single language on both server and client.

Blazor allows having features similar to any other SPA framework like Routing, Template, Binding – one or two way, Rendering, etc.

The name comes by combining Browser and  MVC Razor i.e Blazor.

How does it work?

It entirely relies on WebAssembly (Wasm). Wasm was developed in 2015, to run high-level language directly on browsers. It is supported by W3C which means it is standard and could be utilized by different platform too. There are runtimes available to run C++ codes on browsers too. Since it is from W3C all latest browsers generally have the support of Wasm.

Blazor runs via Wasm but in-between there needs to be a runtime. Mono Wasm allows required .NET assemblies downloads on browser directly which runs on Mono Wasm Virtual Machine.

What are all advantages of Blazor?

  • A single roof of programming language to build client and server-side codes.
  • Wasm is generally faster than JavaScript (JS) because those are binary/compiled code. No need for parsing of scripts.
  • A typed system, a fewer scope of errors due to same. Razor, model binding, etc.
  • All sweet features of C# and .NET core: Dependency Injection (DI), delegates/events, etc.
  • Visual Studio Integrated Development Environment (IDE) to allow a rich experience to develop applications quickly with many provided inbuilt or plug-in supported features.
  • A fallback approach to enable Blazor to run if Wasm is not available to any browser.
    No issue of Garbage collection like all .NET platform, Mono Wasm supports it too.

Limitations of Blazor

  • Still is in the development phase, not recommended for production use.
  • Limited debugging support of Blazor codes since it runs on Wasm.
  • No way to access DOM elements has to rely on JavaScript for same.
  • The second biggest, there is not much components/control available in Blazor to have richer User Experience (UX). Like as simple as AutoSuggestion, we have to rely on JavaScript plugin for same.

Demo of Blazor

https://www.youtube.com/watch?v=IGj49kaYPEc
The source code used in demo: https://github.com/viku85/BlazorDemo

Conclusion and Future

Blazor is easy to use with minimal effort in comparison to any JS SPA framework available in the market. Since it is on .NET, there is less learning curve for people coming from the .NET environment.

A lot of changes and development is going on with Blazor, many refinements, performance improvements, feature add-ons but still not having a final version to use on production.
I believe with the support of controls like Kendo or inbuilt controls in Blazor, application development would be much quicker and feature rich.

We need to wait for the final release (if it happens) and a wide variety of supported controls which may kill JS Frameworks at least in the Microsoft development environment.

……………………………………………………………………………………………………

The views and opinions expressed in this article are those of the author. An avid techie, Vikash enjoys sharing his thoughts on computing and technology in his personal blog.
To know more about our company, please click on Mindfire Solutions. 

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

What Is The Best Way To Learn AngularJS?

What Is The Best Way To Learn AngularJS
What Is The Best Way To Learn AngularJS

At present, AngularJS is being used by a number of high-traffic websites including PayPal, Netflix, The Guardian, Upwork, Freelancer and jetBlue. The open source JavaScript framework is also maintained by Google.  The features provided by AngularJS help developers to build custom web applications based on varying business requirements. AngularJS has been gaining a lot of popularity, interested readers can read on the evolution and rise of AngularJS. In addition to supporting model-view-controller (MVC) design rule, AngularJS further enables JavaScript developers to create robust user interfaces (UIs) by using HTML as a template language and extending HTML tags and attributes. Continue reading What Is The Best Way To Learn AngularJS?

Spread the love
  • 18
  • 2
  •  
  • 2
  •  
  • 2
  •  
  •  
  •  
    24
    Shares

Angular vs React: A Brief Comparison

Angular vs React: A Brief Comparison

Both AngularJS and ReactJS are widely used JavaScript frameworks. Angular is currently being maintained by Google, whereas React is developed and maintained by Facebook. The usage statistics posted on various websites indicate that Angular is currently more popular than React. But the number of stars on its Github page depicts the growing popularity of React. Angular.js and React.js further differ from each other in terms of features, usage and performance. Hence, it becomes essential for developers to know the features of both Angular and React, and understand the important points of distinction between Angular vs React. Continue reading Angular vs React: A Brief Comparison

Spread the love
  • 27
  • 2
  •  
  • 2
  •  
  •  
  •  
  •  
  •  
    31
    Shares

The 7 Most Common Mistakes JavaScript Developers Make

JavaScript Common Mistakes

 

At present, JavaScript is used widely by programmers for developing both web applications and mobile apps. JavaScript has been emerging as one of the preferred languages for building large scale web applications. JavaScript, along with HTML5 and CSS3, help developers to make websites accessible on both computers and mobile devices with a single code base. The full stack web developers prefer writing client-side and server-side code in JavaScript. The developers also have option to accelerate custom application development by taking advantage of various JavaScript libraries, frameworks, and development tools. Continue reading The 7 Most Common Mistakes JavaScript Developers Make

Spread the love
  • 18
  • 2
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
    21
    Shares