HI WELCOME TO Sirees

Top 5 JavaScript Test Automation Frameworks in 2021

Leave a Comment

 JavaScript consistently ranks as the world’s most popular programming language among developers. It should come as no surprise, then, that a variety of JavaScript test automation frameworks are available to help developers test JavaScript apps.

Here’s a look at the top five such frameworks, with tips on the pros and cons of each.

WebdriverIO

Not to be confused with Selenium WebDriver, which supports only browser testing, WebdriverIO is a test automation framework for both browser and native mobile testing. It’s highly extensible and can automate tests for a wide variety of apps running in any mainstream browser or mobile OS.

WebdriverIO’s ability to support a broad set of testing needs makes it a great framework if you develop multiple types of apps and want a single framework for automatically testing them all.

WebdriverIO uses Puppeteer out-of-the-box. It also comes with integration to Mocha, Jasmine and Cucumber and the whole setup requires just a couple of npm commands. 

In sum: use WebdriverIO if you have extensive and broad testing needs that extend beyond just basic JavaScript tests. 

Cypress

Cypress has become one of the most popular JavaScript testing frameworks in recent years, due largely to the fact that it is simple to set up, especially if you’re a front-end developer.

Cypress also boasts the ability to perform both front-end and (to a certain extent) backend testing. That makes Cypress a good choice for developers who use JavaScript (or Node) for both server-side and client-side development.

The main limitations of Cypress include limited support for testing mobile apps: it can handle mobile apps that run natively in a browser, but not other types. It also currently only supports three types of browsers: Chrome, Edge, and Firefox.

In sum: if you want a simple yet powerful JavaScript test automation framework that will meet most standard testing needs, Cypress is a great solution. If you need full application and browser coverage, however, Cypress on its own falls short.

TestCafe

TestCafe is similar to Cypress in that it is easy to deploy. It also offers the advantage of supporting both JavaScript and TypeScript as the languages for writing testing scripts. The TypeScript option may be attractive to developers who prefer strongly typed languages.

TestCafe also supports all of the major desktop browsers, including Chrome, Internet Explorer, Edge, and Safari. It has some limited support for browser-based mobile apps, but in general it is not designed for mobile testing.

A drawback of TestCafe is that it only supports client-side apps. It’s also designed primarily to be an end-to-end and regression testing framework, and does not work well for unit testing or integration testing.

In sum: TestCafe is an excellent choice for testing any desktop or mobile JavaScript apps, provided they are client-side only. If you need server-side testing support or mobile testing, look elsewhere.

Playwright

Released by Microsoft in January 2020, Playwright, which is open source, is one of the newest JavaScript-based test automation frameworks available.

In addition to JavaScript, Playwright also supports testing in .NET C#, Java, and Python, which makes it handy for developers who need to work with multiple languages. Playwright also supports all of the major modern browsers except Internet Explorer, and it can handle both desktop and mobile testing.

As of right now, perhaps the biggest drawback of Playwright is that, because the framework is relatively new, it is still evolving, and it doesn’t offer as many integrations as more mature frameworks. The lack of Internet Explorer support is also a limitation, as is the fact that Playwright requires a custom browser that must be downloaded each time you want to run a test. This adds time to testing routines, and also means that you can’t test in the actual browser that your users are using. Finally, like Puppeteer, Playwright needs to be integrated manually with test frameworks like Mocha, Jasmine or Jest.

In sum: Playwright is an attractive choice for developer-friendly, cross-browser testing that supports multiple languages, including but not limited to JavaScript. But if you need to test for Internet Explorer, you’ll need a different framework. You may also want to wait a bit for Playwright to mature further if you are worried about having to handle rapidly changing APIs.

Puppeteer

If you like Playwright but wish it were more stable and mature, you should consider Puppeteer, which has been around in stable form since 2018.

Playwright’s lead developers formerly worked on Puppeteer, and the frameworks share much in common: they are easy-to-deploy, JavaScript-first browser automation tools that focus on desktop app testing.

The main limitation of Puppeteer is that it only fully supports Chrome and Chromium, so it’s not a true cross-browser testing solution. That said, the Firefox nightly builds are currently compatible with Puppeteer as well, thanks to collaboration between the Puppeteer team and Mozilla developers. Puppeteer support for stable versions of Firefox is in the works.

In sum: Puppeteer is the go-to test automation framework for developers who only need to support Chrome and Chromium. For cross-browser tests, frameworks like Playwright provide a similar experience.

Conclusion

To choose a JavaScript test automation framework, consider several variables:

  • How many types of apps and configurations do you need to support? Frameworks like WebdriverIO are the most extensible.

  • Do you need to test mobile as well as desktop apps? If so, frameworks that broadly support both types of apps, like WebdriverIO, are a good choice.

  • How robust and mature do you want the framework to be? Frameworks like Puppeteer, TestCafe, and WebdriverIO are tried-and-true.

  • Do you need a framework that can handle front-end as well as back-end testing, like Cypress?

  • How quick and easy do you want it to be to write, configure, and run tests? Currently, frameworks like Puppeteer and Playwright require some relatively complex configuration, especially if you are not using them for the narrow use cases that they support out-of-the-box.

Ionic and angular prerequirements

Leave a Comment

check ANDROID_SDK_ROOT / JAVA_HOME / PATH environment variables

Go to PC properties -> Environment Variable -> Use variable for Your_User_name

Or

Control panel-->system --> search edit Environment Variable --> Environment Variable -> Use variable for Your_User_name

 

Add USED variable FOR Your_User_name-> Add New
Variable: JAVA_HOME
Value: C:\Program Files\Java\jdk1.8.0_221

Variable: ANDROID_SDK_ROOT
Value: C:\Users\Your_User_name\AppData\Local\Android\Sdk

 

C:\Users\kansiris\AppData\Local\Android\Sdk\build-tools\31.0.0\lib

 

Add following paths to the environment variable PATH:(system variables)

C:\Users\Your_User_name\AppData\Local\Android\Sdk

C:\Users\Your_User_name\AppData\Local\Android\Sdk\platforms

C:\Users\Your_User_name\AppData\Local\Android\Sdk\platform-tools

C:\Program Files\Java\jdk1.8.0_221

C:\Gradle\gradle-6.3\bin

 

 

 

 

C:\Users\kansiris\AppData\Local\Android\Sdk\

 

C:\Users\kansiris\AppData\Local\Android\Sdk\platform-tools

C:\Users\kansiris\AppData\Local\Android\Sdk\platforms

C:\Program Files\Java\jdk1.8.0_91\bin

C:\gradle-7.2-all\bin

 

 

 

Resolve! Could not find an installed version of Gradle either in Android Studio,

Last updated on: July 25, 2021

During installation and adding the Android platform to your Ionic application you may face the following issue in your terminal window:

[cordova] Could not find an installed version of Gradle either in Android Studio,
[cordova] or on your system to install the gradle wrapper. Please include gradle
[cordova] in your path, or install Android Studio
[ERROR] An error occurred while running subprocess cordova.

cordova.cmd build android exited with exit code 1.

Re-running this command with the --verbose flag may provide more information.

How to resolve this issue?

You need to install/ Download the Gradle setup and add it in your Environment Variables. Just follow these steps:

Step 1) Download Gradle files

Go to the Gradle release page and download the latest zip file. Which reads like gradle-6.2-bin.zip

 

Step 2) Extract this file and place in

C:\Gradle\gradle-6.2

 

 

Step 3) Copy path then add in Environment Variables

Open Environment Variables then add step 2 bin path to it.

 

 

 

 

That’s it now reopen terminal window to run Ionic commands to create productions files

 

 

Restart the system

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Android Studio error "Installed Build Tools revision 31.0.0 is corrupted"

 

 

First of all, I face this issue in Android Studio 4.2.2 and you not need to downgrade the SDK build tool 31 to 30 or not to change compile SDK version.

The main problem is the two files missing in SDK build tool 31 that are

1. dx.bat

2. dx.jar

The solution is that these files are named d8 in the file location so changing their name to dx will solve the error.

The steps are below.

For Windows

go to the location

 

 "C:\Users\user\AppData\Local\Android\Sdk\build-tools\31.0.0"

 

find a file named d8.bat. This is a Windows batch file.

 

rename d8.bat to dx.bat.

 

in the folder lib ("C:\Users\user\AppData\Local\Android\Sdk\build-tools\31.0.0\lib")

 

rename d8.jar to dx.jar

 

Remember AppData is a hidden folder. Turn on hidden items to see the AppData folder.

For macOS or Linux

# change below to your Android SDK pathcd ~/Library/Android/sdk/build-tools/31.0.0 \

  && mv d8 dx \

  && cd lib  \

  && mv d8.jar dx.jar

Now run your project...

 

 

 

ANDROID_HOME

Deprecated (in Android Studio), use ANDROID_SDK_ROOT instead.

ANDROID_SDK_ROOT

Installation directory of Android SDK package.

Example: C:\AndroidSDK or /usr/local/android-sdk/

ANDROID_NDK_ROOT

Installation directory of Android NDK package. (WITHOUT ANY SPACE)

Example: C:\AndroidNDK or /usr/local/android-ndk/

ANDROID_SDK_HOME

Deprecated (in Android Studio 4.2), use ANDROID_PREFS_ROOT instead.

ANDROID_PREFS_ROOT

Location of SDK related data/user files.

Example: C:\Users\<USERNAME>\.android\ or ~/.android/

ANDROID_EMULATOR_HOME

Location of emulator-specific data files.

Example: C:\Users\<USERNAME>\.android\ or ~/.android/

ANDROID_AVD_HOME

Location of AVD-specific data files.

Example: C:\Users\<USERNAME>\.android\avd\ or ~/.android/avd/

JDK_HOME and JAVA_HOME

Installation directory of JDK (aka Java SDK) package.

Note: This is used to run Android Studio(and other Java-based applications). Actually when you run Android Studio, it checks for JDK_HOME then JAVA_HOME environment variables to use.

 https://filehippo.com/download_java-development-kit-64/8-update-91/post_download/

 

create simple ionic app

Leave a Comment

 Install Ionic

npm install -g cordova ionic

First, install Node.js. Then, install the latest Cordova and Ionic command-line tools in your terminal. Follow the Android and iOS platform guides to install required tools for development.

 If you’re new to the command line, read our Terminal tutorial 

Start an App

ionic start myApp tabs

Create an Ionic App using one of our ready-made app templates, or a blank one to start fresh. Check out the Market for more designs.

For v1 projects, use the --type ionic1 flag.

o$ ionic start myApp blank

o$ ionic start myApp tabs

o$ ionic start myApp sidemenu

Run your App

                cd myApp

ionic serve

              

Much of your app can be built right in the browser with ionic serve. We recommend starting with this workflow.

When you're ready to deploy your app to a real device, check out ourDeploying guide.


Ionic generate page page1


$ ionic generate 

$ ionic generate component

$ ionic generate directive

$ ionic generate page

$ ionic generate pipe

$ ionic generate provider

$ ionic generate tabs

$ ionic generate component foo

$ ionic generate page Login

$ ionic generate page Detail --no-module

$ ionic generate page About --constants

$ ionic generate pipe MyFilterPipe

Ionic info

Social sharing

$ ionic cordova plugin add cordova-plugin-x-socialsharing

$ npm install --save @ionic-native/social-sharing


If you upgrade to Node 8 on macOS and have an existing project, you will get the following error: sass

 You need to run the following:

npm rebuild node-sass



Add mod

# Add the Cordova plugin

ionic cordova plugin add cordova-plugin-admob-free


# Add the Ionic Native types for pro (--save for < npm@5)

npm install @ionic-native/admob –save


npm install --save @ionic-native/admob-free



build and apk

ionic platform add android

ionic cordova build --release android


C:\Program Files\Java\jre1.8.0_161\bin

keytool -genkey -v -keystore d:\my_private_key.keystore -alias my_key_alias -keyalg RSA -keysize 2048 -validity 10000

password:sireesh

C:\Program Files\Java\jdk1.8.0_161\bin


jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore D:\my_private_key.keystore  D:\project\kansiris\vinayaka\vinayaka\platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk my_key_alias


jarsigner -verify D:\project\kansiris\vinayaka\vinayaka\platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk

C:\Users\kansiris\AppData\Local\Android\Sdk\build-tools\26.0.2


zipalign -v 4 D:\project\kansiris\vinayaka\vinayaka\platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk D:\project\kansiris\vinayaka\vinayaka\platforms\android\app\build\outputs\apk\release\app-release.apk




Google play store already having app published with bundle io.ionic.starter

you can go to your config.xml and change your bundle id like:

<widget id="com.test.myapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

here com.test.myapp is your app's bundle id. than rebuild release signed apk and zipalign. and try to upload again.



<p>

    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.

  </p>


  <button ion-button secondary menuToggle>Toggle Menu</button>

<button(click)="onloadpage1()">button1</button>


How to Build a Shopping Cart with Ionic 4

Leave a Comment

 When you are building a shopping app with Ionic there is no way around having a decent cart. And displaying a cart plus keeping track of all items can be challenging depending on your data.

In this tutorial we will implement a shopping cart which keeps track of our items, displays a list of all items and calculates the total amount.

ionic-4-shopping-cart

Oh and we will also animate part of our app to create an even richer user experience by using the simple but awesome animate.css.

Starting our Shopping Cart

We start as always with a blank app and add another page that will be the modal of our cart and a service to manage all cart interaction in the background. Also we can directly install our animation package with npm, so go ahead and run:

Because we will use the generated page as a modal and not just a regular page, we need to add its module to our main app module. If you skip this step you will later encounter a problem when presenting the modal, so go ahead and change your app/app.module.ts to:

We also need to import the CSS of the animation library which we can do right in our src/global.scss, simply add the import after the already existing imports:

Oh and while we are here, let’s leave some CSS for the modal that we will create to make it look smaller on our screen, just like a simple overlay. The app I had in mind was the German “pizza.de” which looks kinda like this:
pizza-app-example

Building the Cart Service

Before we dive into all the view elements we need to take of the engine of our app – the cart service.

You should always use a service to keep track of your data and perform operations in order to call it from all places and pages of your app. A page should simply handle the view clicks and be the layer between the view and the logic to handle all interaction.


Our service needs to keep track of all items added to the cart and provide functions to get the cart or all product items which you might normally get from an API.

In order to make it easier to get the current count of products we can use a BehaviourSubject like we did many times before. With this variable, all other pages can simply subscribe to the cartItemCount and automatically receive any updates without further logic! We just need to make sure the call next() on the variable whenever we change the cart.

The functions to change our cart are pretty self-explanatory: Add an item, reduce the item count or completely remove a stack of items.

The logic looks more complicated than it actually is, we just need to find the right item in our cart array and then work with the amount property to change the count and finally update the BehaviourSubject.

For now that’s enough, so go into your services/cart.service.ts and change it to:

Now we have a powerful service in the background that we can inject into all of our pages to manage our cart.

Adding the Order Page

First of all we now need a page to display the products (that we get from the service) and let the user add these items.

We also grab a reference to the cart and the item count of the cart, and after doing it once in the beginning the page is basically set up. The addToCart will simply call the function of our service and that’s it – the cart count will be updated through the BehaviourSubject to which our view in the next step will be subscribed

When we open the cart we present the page we created in the beginning and also apply our custom CSS class to it. The additional logic in the dismiss is only for our animations, more on that in a second.

For now open your app/home/home.page.ts and change it to:

The only tricky thing in our page is applying animations, but with the help of the animateCSS() function we can easily add new animations to our cart element. You just need to make sure that you either remove the animation class that you add afterwards to trigger it again, or keep the class (like when we open the modal) so the item stays out of the view.

That’s why the openCart has some additional code to keep the cart item out of view and later fly it in back again!

This element is accessed as a ViewChild and is actually a FAB button that also displays the item count using the async pipe in our view.

Besides that our view consists of a simple list for our products and a button to add each element. Most of the code below is also for aligning the rows inside an item accordingly to achieve a somewhat acceptable presentation.

For an even cooler list of items also check out my dynamic slides app or a complete implementation of an accordion list with product items!

Right now simply change your app/home/home.page.html to:

We are now able to add items to our cart, but the fab is a bit small and also the number is kinda in the wrong place. But we can easily tweak this by applying some custom CSS to the button, the icon and the label right inside our app/home/home.page.scss:

Now your whole view is functional so far and even the modal of our shopping cart opens, but there’s no list of items yet.

Creating our Cart Modal Page

The last missing piece, the calculation and list of all selected items before a user continues with the checkout.

Our modal should show all information (like you saw in the screenshot before) and allow to quickly change the amount of selected items. Therefore we need some functions, but basically all of them are just making the right calls to our service!

So heres the code for our app/pages/cart-modal/cart-modal.page.ts:

As you can see, only the getTotal actually performs a calculation in here (which we could/should also move to the service actually) to iterate over all items in the cart and add up the amount times the price of each selected item.

Regarding the checkout, that’s actually another story for a full post. Some interesting material on this can be found here, but simply let me know if you would like to see Paypal/Stripe/Alipay integration with this shopping cart and we’ll add a part 2!

For now though let’s finish the modal by implementing the view. Again, a lot of code but most of it is styling and aligning the items correctly, so go ahead with your app/pages/cart-modal/cart-modal.page.html and change it to:

And now your shopping cart app is ready and working, with cool animations.

Who said cross platform apps can’t look good?

Conclusion

Implementing a shopping cart in your Ionic 4 app is basically about developing the right functionality in a service to keep track of the cart. The view will only present the items, and using a BehaviourSubject makes it even easier to display changes if they only happen in one single place of your app!

Again, if you want more information about payments just let me know in the comments.