Your perfect guide to Web Architecture

Web architecture determines how software logic is divided between a server and a client, as well as how these two components communicate with each other. Depending on the needs of your website or a web app, you choose the web architecture that would work best for it (you can turn to this article to learn more).

The ways web architecture types work are quite different and depend on a client model and requests a client sends/receives to/from a server. Still, the most popular architecture is SPA (single-page app), which work like this:

With web applications, you have the server versus the customer side. Basically, there are two projects running simultaneously:

  • The code which lives in the program and reacts to client input
  • The code which lives on the server and reacts to HTTP asks

Web Application Architecture Example

Picture by means of Wikipedia

When composing an application, it is up to the web designer to choose what the code on the server ought to do in connection to what the code on the program ought to do. With server-side code, dialects include:

  • Ruby on Rails
  • PHP
  • C#
  • Java
  • Python
  • Javascript

Actually, any code that can react to HTTP asks for has the capacity to keep running on a server. Here are a couple of different properties of server-side code:

Is never observed by the client (aside from inside an uncommon glitch)
Stores information, for example, client profiles, tweets, pages, and so forth…
Makes the page the client asked

With customer side code, dialects utilized include:

  • CSS
  • Javascript
  • HTML

These are then parsed by the client’s program. Besides, the customer side code can be seen and altered by the client. Also, it needs to impart just through HTTP asks for and can’t peruse records off of a server specifically. Moreover, it responds to client input.

Web Application Architecture is Important for Supporting Future Growth

The motivation behind why it is basic to have great web application architecture is on the grounds that it is the outline for supporting future development which may originate from expanded interest, future interoperability, and improved dependability prerequisites. Through question situated programming, the authoritative structure of web application architecture characterizes accurately how an application will work. A few highlights include:

Conveying industrious information through HTTP, which can be comprehended by customer side code and the other way around

Ensuring asks for containing substantial information
Offers confirmation for clients
Points of confinement what clients can see dependent on authorizations
Makes refreshes and erases records

Kinds of web application architecture

Despite the model, all web application segments dependably work all the while and make a vital web application. Contingent upon how the application rationale is circulated among the customer and server sides, there can be different kinds of web application architecture.

Inheritance HTML web application

As per the specific first and fundamental web application architecture, a server, comprising of web page development rationale and business rationale connects with a customer by conveying a total HTML page. To see a refresh, the client needs to completely reload the page or, as such, to have the customer send a demand for an HTML page to the server and load its whole code indeed.

Gadget web application

In this compose, the web page development rationale is supplanted by web administrations, and each page on the customer has separate elements called gadgets. By sending AJAX questions to web administrations, gadgets can get pieces of information in HTML or JSON and show them without reloading the whole page.

Single-page web application architecture

This is the most present-day web application architecture, where you download a solitary page just once. On the customer side, this page has a JavaScript layer that can openly speak with web benefits on the server and, utilizing the information from web administrations, make ongoing updates to itself.

End

Web application architecture composes and part models have been developing together with the web itself. While the inheritance structure and a fundamental segment show showed up in the seasons of Web 1.0, present-day web application architecture composes and adaptable segment models are more typical for Web 2.0 and 3.0 times.

The decision of a model and architecture can decide how responsive, powerful, secure and quick your web application will be. So before propelling the improvement venture, investigate your business needs and assess every single conceivable alternative.

 

A CAREER IN WEB DEVELOPMENT

The web is just going to get bigger, and somebody needs to make it. Figuring out how to create websites as a vocation has numerous points of interest:

 

Web Development is Flexible

Web development is an exceptionally adaptable activity that enables you to work how you need. You could join an organization and work as a feature of a group, or go solo and work as an independent designer. You could likewise work low maintenance as a developer as a method for getting extra wage close by your principle work.

Most designers do what they do in light of the fact that they adore it; web Development is much of the time referred to as a vocation with high occupation fulfillment rates. The main three purposes for this fulfillment are the work-life balance, work adaptability, and pay.

 

It’s Easy to Get Started

Beginning as a web engineer is simple; all you require is web access and some learning materials, which are promptly accessible on the web. The key things you have to begin is wanted; you must need it. The advancement you make will be to a great extent down to your capacity to rouse yourself and buckle down.

HTML, CSS, and JavaScript are the fundamental fixings, however, in case, you’re energetic there’s a mess more you should need to figure out how to facilitate your profession. You may wind up considering Ajax, PHP, Ruby, AngularJS, and then some.

These attitudes aren’t something you have to stress over a few seconds ago, however, what you do need to know is that there are a lot of chances to propel your abilities and turn out to be a greater amount of a specialist.

A little about the languages…

 

What is HTML?

Firstly, HTML is short for “HyperText Markup Language”. That may sound scary, but it simply means it is a language for describing web-pages using ordinary text. HTML is not a complex programming language.

Each and every website online is, at its most essential, an HTML record. The HTML code incorporates labels which advise the guest’s program on how to render the information on their screen, illuminating it when certain parts, for example, sections and pictures, begin and end.

 

What is CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in the display for different devices and screen sizes as well as a variety of other effects.

Usually for in excess of one template to apply to a solitary HTML page; that is the place the “falling” part comes in. The falling piece implies that each CSS run can supersede past rules — the rules are basically positioned from general down to particular. The web program takes the most particular decide and uses that. It sounds convoluted, yet it’s not — and it spares designers a considerable measure of time.

 

What is JavaScript?

A website made utilizing HTML and CSS can look awesome, yet it’s simply static. To make it extremely intriguing, you should need to include some intuitiveness, for example, recordings, news channels, or liveliness. JavaScript advises the program on how to react when a client makes a move without the program asking the server. This spares time, includes additional ease of use, and gives web engineers far more noteworthy command over their websites.

Javascript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow the client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities

Popup Handling in Selenium

 

There are different types of popup and alerts in Web application some are javascript popups and some are HTML for handling them in selenium WebDriver there are diff ways.

What is an Alert?

Alert is a small message box which displays the on-screen notification to give the user some kind of information or ask for permission to perform certain kind of operation. It may be also used for warning purpose.

Different types of Alerts

Simple Alert
Simple alerts just have an OK button on them. They are mainly used to display some information to the user. The first alert on our test page is a simple alert. The following code will read the text from the Alert and then accept the alert. An important point to note is that we can switch from the main window to an alert using the driver.SwitchTo().Alert().

Prompt Alerts
In prompt alerts, you get an option to add text to the alert box. This is specifically used when some input is required from the user. We will use the SendKeys() method to type something in the Prompt alert box.

Confirmation Alert
This alert comes with an option to accept or dismiss the alert. To accept the alert you can use IAlert.Accept() and to dismiss you can use the IAlert.Dismiss().

JavaScript Popup: – we can’t inspect javascript popup because it is not written in HTML also we can’t move javascript popups. In order to handle that popup, there is an interface called Alert.

In order to handle javascript popup first, we have to switch the driver control to the Javascript popup.For switch the Control we have to use driver.switchTo().alert() .
Methods present in Alert interface
accept();
dismiss();
sendkeys();
getText();

 

 

File Uploading Popup: – For uploading file uploading popup we can use sendKeys(); or we can use window automation tools like AutoIt and Sikuli. Also, we can’t inspect and move these popups.

Using the sendKeys Method

 

Using Sikuli with selenium:- sikuli is an open source image recognition automation tool which is used to automate the desktop applications, web applications, and gaming applications. To use sikuli with selenium copy sikulixapi.jar and in the libraries.

 

Authentication Popup:- The title of this popup page is authentication required and this popup also contains 2 fields Username and Password.

 

File Download Popup Handel using AutoIt:- AutoIt is an open source window automation tool which uses a basic scripting language for writing that script we use “AutoIt Script Editor” and for inspecting the popup we use “AutoIt window info tool”.
1. First, we have to inspect the popup using “Finder Tool”.

2. Open SciTE Script and AutoIt code and save that AutoIt code with the extension of “.au3” then right click on that file and compile Script which will generate a “.exe” file.

 

Conclusion
In this tutorial, we tried to make you acquainted with the WebDriver’s Alert class that is used to handle web-based pop-ups. We discussed the different types of popup and alerts in a Web application. Some are javascript popups and some are HTML for handling them in selenium WebDriver there are diff ways.

Testing Next Generation – TestNG

 

TestNG is a testing framework inspired from JUnit and NUnit but introducing some new functionality that makes it more powerful and easier to use.

It is an open-source automated testing framework where NG of TestNG means Next Generation.  

Why Test NG

These are the major advantages of Test NG

  • Test NG has advanced features which help us to easily maintain our automation scripts.
  • It can achieve Batch execution and Parallel execution
  • It can achieve Group execution
  • It gives the ability to produce HTML Reports of execution  
  • Data Parameterization is possible  

Annotations available in TestNG

  • @BeforeSuit
  • @AfterSuit
  • @BeforeTest
  • @AfterTest  
  • @BeforeClass  
  • @AfterClass
  • @BeforeMethod 
  • @AfterMethod
  • @Test
  • @Parameters
  • @DataProvider

To use TestNG first you have to install Test NG plugin in Eclipse IDE.

Test NG Class: The class which contains at least one @Test annotation is called TestNG class.

The output is:-

This is Before Method
My First Test
This is After Method
This is Before Method
My Second Test
This is After Method
===============================================
Suite
Total tests run: 2, Failures: 0, Skips: 0
===============================================

Batch Execution & Run Script Multiple times  

Batch Execution: Executing multiple scripts or multiple TestNG class is called Batch Execution. For achieving batch execution:-  

  1. We have to generate a TestNG suit file.
  2. Add all the classes in the TestNG classes as shown below.   

For generating TestNG suit simply just Right click on TestNG class and move to TestNG and click on Convert to TestNG. We can also create a suit file for a package which contains all TestNG classes by just right-clicking on the package and following the same.

Run Script Multiple Times: To run a test script multiple times we have to use InvocationCount after @Test annotation.

The output is:-  

This is Before Method
My First Test
This is After Method
This is Before Method
My First Test
This is After Method
This is Before Method
My First Test
This is After Method
This is Before Method
My First Test
This is After Method
This is Before Method
My First Test
This is After Method
This is Before Method
My Second Test
This is After Method
===============================================
Suite
Total tests run: 6, Failures: 0, Skips: 0
===============================================

For changing the order of script execution:

There are different ways to change the order of script execution for TestNG script.

  1. By using ‘priority’ attribute: If we want to change the order of executing script we can use ‘(priority=1)’ after @Test. TestNG by default will execute the scripts and class in Alphabetic order.

The output is:-  

My Third  Test
My Second Test
My First Test
===============================================
Suite
Total tests run: 3, Failures: 0, Skips: 0
===============================================

  1. By Using ‘dependsOnMethods’ attribute: For changing the order of executing script we can also use ‘(dependsOnMethods = { “methodname” })’ after @Test.

The output is:-

My Third  Test
My Second Test
My First Test
===============================================
Suite
Total tests run: 3, Failures: 0, Skips: 0
=================================================

  1. By using TestNG Suit file: For changing the order of executing script we can also use includeTag (<include name=“methodname”></include>) in suit file.

The output is:-

My Third  Test
My Second Test
My First Test
===============================================
Suite
Total tests run: 3, Failures: 0, Skips: 0
===========================================

Parallel Execution:-

We use parallel script execution to test the Script with multiple browsers in order to check compatibility. This is called cross-browser testing. To achieve parallel Script execution, we use parameter tag in test runner in the TestNG Suit file and use one of the annotation @Parameters in TestNG Class.

As a developer, you will find TestNG very useful as it gives the developer the ability to write more flexible and powerful tests with help of easy annotations, grouping, sequencing & parametrizing.