Chrome DevTools

Chrome DevTools

The Google Chrome Developer Tools is a consolidated environment built into Google Chrome Browser. It is used for web authoring, debugging, monitoring, optimizing, and understanding web applications or websites.

How you can access the DevTools

1.Google Chrome – F12 Web Developer Tools

2.Internet Explorer – F12 Web Developer Tool

3.Safari – Safari Web Development Tools

4.Firefox – F12 Web Console / Browser Console / Firebug

5.Opera – Opera Dragonfly

Overview

• Elements : The elements panel can be used to interact with the layout and design of the web app, manipulating freely the CSS to see the changes live.
• Console : The console can be used in two ways: you can either use it to log diagnostic information or use it as a shell to interact with the JavaScript on the page.
• Sources: Use the sources panel to debug your JavaScript or connect your local files via Workspaces to use the live editor.
• Network: The network panel will give you an overview of the requested and downloaded resources. You can also optimize your page load performance from this panel.
• Timeline: The timeline panel is there to help with the runtime performance of your page by recording and exploring events happened during the page lifecycle.
• Profiles: This panel is an addition to the timeline panel and will give you more information regarding particular events.
• Application: In this panel, you can inspect all the resources that are being loaded on your website, including IndexedDB or Web SQL databases, local and session storage, cookies, Application Cache, images, fonts, and stylesheets.
• Security: This panel will help you deal with mixed issues, problems with certificates and more.

Elements panel

1. The elements panel can be used to interact with the layout and design of the web app.
2. Inspect and live edit your site’s design and content.
3. In the Elements Panel, you can live-edit a DOM node by simply double-clicking a selected element and making changes
4. You can even live-edit style property names and values in the Styles pane.
5. You can verify the max and min length of the text via Inspect the element and writing in html.
6. You can verify weather the click event listener is applied or not.
7. You can reveal the hidden passwords.

Network panel

The Network panel consists of five panes:

Controls. Use these options to control how the Network panel looks and functions.
Filters. Use these options to control which resources are displayed in the Requests Table.
Overview. This graph shows a timeline of when resources were retrieved. If you see multiple bars stacked vertically, it means that those resources were retrieved simultaneously.
Requests Table. This table lists out every resource that was retrieved. By default, this table is sorted chronologically, with the earliest resources at the top. Clicking on the name of a resource yields more information about it. Right-click on any of the table headers to add or remove columns of information.
Summary. At a glance this pane tells you the total number of requests, amount of data transferred, and load times.

       What you can check in the Network panel for testing point of view

• The Network Panel allows you to see how your page renders, and time taken to render from start to end.

• You can click on the camera icon and refresh the page on the device.

• You can see which assets were loaded, when they were loaded, in what order they were loaded, and so on.

• Also, you can check the status of the request.

• You can copy request and response.

• You can filter the request based upon Status-code, method name.

• You can see the all ajax request in XHR tab this is important for single page application.

Server Response Codes

• 1xx Informational: Request received, continuing process.
• 2xx Success: Standard response for successful HTTP requests.
• 3xx Redirection: This class of status code indicates the client must take additional action to complete the request. Many of these status codes are used in URL redirection
• 4xx Client Error: The 4xx class of status codes is intended for situations in which the client seems to have erred.
• 5xx Server Error: The server failed to fulfill an apparently valid request.

   

     Timeline panel

• The timeline panel is there to help with the runtime performance of your page by recording and exploring events happened during the page lifecycle.

• It’s the best place to start investigating perceived performance issues in your application.

• To make a recording of a page load,

• 1)open the Timeline panel,

• 2)open the page that you want to record, and then reload the page.

• 3)The Timeline panel automatically records the page reload. 

• Record the Timeline to analyze every event that occurred after a page load or a user interaction

• Here are some more details you can view using the Record Timeline

• View FPS, CPU, and network requests in the Overview pane

• Click on an event within the Flame Chart to view details about it

• Zoom in on a section of a recording to make analysis easier

    Security panel

• To view the overall security of a page, open DevTools and go to the Security Panel.
• The first thing you see is the Security Overview. At a glance, the Security Overview tells you whether the page is secure. A secure page is indicated with the message This page is secure (valid HTTPS).
• Click View certificate to view the server certificate for the main origin.
• A non-secure page is indicated with the message This page is not secure. The Security Panel distinguishes between two types of non-secure pages.

1.If the requested page is served over HTTP, then the main origin is flagged as not secure.
2.If the requested page is retrieved over HTTPS, but the site includes HTTP resources.

Sources panel

• All the fronted HTML and JS files is available in the sources panel.
• You can use a breakpoint to debug the source code
• You can view the configuration.js file and check weather all the configuration urls and variables are correct

Console Panel

• When something goes wrong, open the DevTools console (Ctrl+Shift+J / Cmd+Option+J) to view the JavaScript error messages. Each message has a link to the file name with the line number you can navigate to
• You can see the errors, warnings, logs, info in the network call or JS in console tab.
• You can execute small JS code in the console tab.
• Copy images with help of console.
• Copy all the urls from the webpage. 

   Reload in Chrome browser

When the “Developer Tools” console is open in Google Chrome, the Reload button gets a drop down menu with some options.

Next, right-click on the browser Reload button visible in the upper left-hand corner of your computer screen.

Now, you can find 3 Reload Options displayed:

Normal Reload: Uses Cached Data

Hard Reload: Forces browser to re-download items and reload. It is possible that used resources may come from a cached version.

Empty Cache & Hard Reload: Cache for the page is cleared completely and everything must be re-downloaded as required.

Simulate Mobile Devices with Device Mode

• Device fragmentation is a very real problem when testing Web apps on real devices, particularly for UI and functional tests. The number of devices with unique specifications and proprietary build variations has increased. At an advanced level, to fully test your Web App’s responsiveness and performance on real devices you will need to experiment your site on various platforms, across a number of device form factors.
• Head over to Chrome Dev tools and toggle the Device Mode button to turn Device Mode on or off.
• Select the device you want and test how your website looks in that device.
• Device mode allows us to check whether a website is mobile friendly or not.
• How your website looks on various devices.
• This integration allows you to test Web Apps on different sizes and configurations.
• Enable a wide variety of screen resolutions and sizes to be tested.
• Use network throttling to simulate different network speeds
• Extra options to view the touchpoint size
• No mobile test is complete without having tested on real devices as well

Manual Testing

1) What is Quality?
Quality is conformance to requirements, Degree of Excellence and Measuring as per specifications.

2) What is Quality Assurance?
Quality Assurance involves entire software development process i.e. monitoring and improving the process, making sure that any agreed upon standards and procedures are followed, and ensuring that problems are found and dealt with.

3) What is Quality Control?
The Operational Techniques and Activities that are used to fulfill the requirements for quality.

4) What is the difference between Quality Assurance and Quality Control?

• Quality Assurance                    Quality Control 
•  Prevention based                            Detection based  
•  Process oriented                              Project oriented      
• Organization level                           Producer responsibility
•  Phase Parallel activity                    End phase activity                                                                                                                                                                                                 

5) What is Testing?
Testing is a process of excising or evaluating a system component by manual or automated means to verify that is satisfying specified requirements. To ensure that manufactured product is working according to specifications and working perfectly.

6) What is Verification?

• Verification is a static testing procedure.
• It involves verifying the requirements, detailed design documents, test plans, walkthroughs, and inspections of various documents produced during the development and testing process.
• Ensuring that the output of a phase meets the requirement or goals set for the phase.” Are you building the product right”.
• It is a preventive procedure.
• It involves more than two or three persons and is a group activity.
• It requires co-operation and scheduling of meetings and discussions.
• It is also called human testing, since it involves finding the errors by person participating in a review or the walkthrough.
• Verification occurs on requirements, design and coding.
• Verification is made both in the executable and non-executable forms of a work product.
• Verification finds errors early in the SDLC and reduces the cost of errors.
• An effective tool for verification is a checklist.

Verification activities include

• Requirements verification. 
• Functional design verification
• Internal design verification
• Code verification

Verification tasks include

• Planning 
• Execution

Verification deliverables (work products) are

• Verification test plan 
• Inspection report
• Verification test report

7) What is Validation?

• Validation is a dynamic testing procedure.
• Validation involves actual testing of the product as per the test plan (unit, integration, system, acceptance test).
• Ensuring that a phase is effective in achieving its goal. “Are we building the right product”.
• It is a corrective procedure.
• It involves the tester and user (sometimes).
• It is to check that the product satisfies the requirements and is accepted by the user.
• It is also called computer testing, since errors are found out by testing the software on a computer 
• Validation occurs only in coding and executable application.
• Validation is done only on executable forms of a work product.
• Validation finds errors only during the testing stage and hence cost of errors reduced is less than verification.
• Various manual and automated test tools are available for validation.

Validation activities include

• Unit testing
• Usability testing 
• Function testing
• System testing
• Acceptance testing

Validation tasks include

• Planning
• Testware developments
• Test execution
• Testware maintenance

Validation deliverables are

• Test plan
• Test design specification
• Test case specification
• Test procedure specification
• Test log
• Test incident report

8)What is Quality Analyst?

• Identifies weakness in the process and improve them.
• Sets measurements program to evaluate process.
• Process are established and continuously improved to produce products that meets specification and are fit use.

9) What is Test Eng?

• Verifies specific attributes of the product or project.
• Focuses on inspection, testing and removal of defects.
• Responsibility of worker.
• Concerned with specific products.

10) What is Priority?
Priority is with respect to the delivery of the application. It is assigned by the developer and describes the importance a developer places on fixing the bug.

11) What is Severity?
Severity is with respect to the application. It is assigned by user and describes the level of impact the bug is having on them.

12) What is Test Plan?
Test plan is a document that describes the overall approach to testing and testing objectives. A standard test plan consists of following.

• Software system description
• Test scope
• Test objectives
• Assumptions
• Risk analysis
• Test design
• Test data management
• Test environment
• Test tools
• Test techniques
• Schedule and milestones
• Resources
• Roles and responsibilities
• Defect management
• Configuration management
• Guidelines for generating testware
• Metrics to capture

13) What is Test Case?
Test case is basically a sequence or flow of test to achieve certain functionality. Test case is used for “how to test”. The test case should contain.

• Test case id 
• Pre condition
• Steps or description 
• Expected output
• Actual output 
• Result

14) What is Testing Life Cycle?

• Proposal
• Test Requirement Specifications
• Test Design
• Test Review
• Inspection and Release 
• Client Acceptance

15) What is Test Strategy?
Test Strategy will give the full insight of the counter part that how will be the testing carried out, viz, for preparation of test data we will use boundary, equivalence partitioning, and we will be using this % of white box and this % of black box. Test strategy is a subset of test plan.
Test strategy talks about the overall approach towards testing

16) What is Test Methodology?
A test methodology talk about using which methods and techniques the test case verifies their objectives. The tests that you will execute, how they are going to verify their objective becomes the best methodology.

17) What is Test Script?
A procedure identifying steps required executing a test case, including the actual values for input and expected results.

18) What is Test Report?
A document that contains the current status of the testing of a project. This can include software system description, test scope, test objectives, test results, a summary of working and non-working functions of the application, risk and recommendations.

19) What is Test Coverage?Coverage of requirements in testing in terms of test cases.
First you will have the business requirement documents, you may have the functional spec. documents. Now based on that you will prepare your test cases. You may go for a traceability matrix to see the coverage of requirements.

20) What is Test Scenario?
The events that occur when executing the application. It is a sub issue of test case.

21) What is Test Objective?
Test objective gives us what actually to test.

Basics of Security Testing

Security : Security means that authorized access is granted to protected data and unauthorized access is restricted.

So, it has two major aspects; first is protection of data and second one is access to that data. Moreover, whether the application is desktop or web based, security revolves around the two aforementioned aspects. Let us have an overview of security aspects for both desktop and web based software applications.

Security Testing : It is the process to determine that an information system protects data and maintains functionality as intended.

“Security Testing helps in finding out loopholes that can cause loss of important information”

Security Testing is Needed :

1) To ensure Input Data Validation

2) To ensure Control on internal Processing

3) To ensure Message Integrity

4) To ensure output Data Validation

Desktop and Web Security Testing

l   A desktop application should be secure not only regarding its access but also with respect to organization and storage of its data.

l   Similarly, a web application demands even more security with respect to its access, along with data protection. Web developer should make the application immune to SQL Injections, Brute Force Attacks and XSS (cross site scripting).

l   Similarly, if the web application facilitates remote access points then these must be secure too. Moreover, keep in mind that Brute Force Attack is not only related to web applications, desktop software is also vulnerable to this.

Security Testing Techniques

1) Access to Application

2) Data Protection

3) Brute-Force Attack

4) SQL Injection and XSS (cross site scripting)

5) Service Access Points (Sealed and Secure Open)

*The above three security aspects should be taken into account for both web and desktop applications while, the following points are related with web based applications only.

1 ) Access to Application

Whether it is a desktop application of website, access security is implemented by 'Roles and Rights Management'. It is often done implicitly while covering functionality,

Example : In a Hospital Management System a receptionist is least concerned about the laboratory tests as his job is to just register the patients and schedule their appointments with doctors. So, all the menus, forms and screen related to lab tests will not be available to the Role of 'Receptionist'. Hence, the proper implementation of roles and rights will guarantee the security of access.

How to Test Access to Application:

l   In order to test this, thorough testing of all roles and rights should be performed.

l   Tester should create several user accounts with different as well multiple roles. Then he should use the application with the help of these accounts and should verify that every role has access to its own modules, screens, forms and menus only. If tester finds any conflict, he should log a security issue with complete confidence.

2) Data Protection:

There are further three aspects of data security:

l   First one is that a user can view or utilize only the data which he is supposed to use. This is also ensured by roles and rights e.g. a TSR (telesales representative) of a company can view the data of available stock, but cannot see how much raw material was purchased for production. So, testing of this aspect is already explained above.

l   The second aspect of data protection is related to how that data is stored in the DB. All the sensitive data must be encrypted to make it secure. Encryption should be strong especially for sensitive data like passwords of user accounts, credit card numbers or other business critical information.

l   Third and last aspect is extension of this second aspect. Proper security measures must be adopted when flow of sensitive or business critical data occurs. Whether this data floats between different modules of same application, or is transmitted to different applications it must be encrypted to make it safe.

How to Test Data Protection

The tester should query the database for 'passwords' of user account, billing information of clients, other business critical and sensitive data and should verify that all such data is saved in encrypted form in the DB. Similarly (s)he must verify that between different forms or screens, data is transmitted after proper encryption. Moreover, tester should ensure that the encrypted data is properly decrypted at the destination. Special attention should be paid on different 'submit' actions. The tester must verify that when the information is being transmitted between client and server, it is not displayed in the address bar of web browser in understandable format. If any of these verifications fail, the application definitely has security flaw.

3) Brute-Force Attack

Brute Force Attack is mostly done by some software tools. The concept is that using a valid user ID, software attempts to guess the associated password by trying to login again and again. A simple example of security against such attack is account suspension for a short period of time as all the mailing applications like 'Yahoo' and 'Hotmail' do. If, a specific number of consecutive attempts (mostly 3) fail to login successfully, then that account is blocked for some time (30 minutes to 24 hrs).

How to test Brute-Force Attack

The tester must verify that some mechanism of account suspension is available and is working accurately. (S)He must attempt to login with invalid user IDs and Passwords alternatively to make sure that software application blocks the accounts that continuously attempt login with invalid information. If the application is doing so, it is secure against brute-force attack. Otherwise, this security vulnerability must be reported by the tester.

4) SQL Injection and XSS (cross site scripting)

Conceptually speaking, the theme of both these hacking attempts is similar, so these are discussed together. In this approach, malicious script is used by the hackers in order to manipulate a website. There are several ways to immune against such attempts. For all input fields of the website, field lengths should be defined small enough to restrict input of any script e.g. Last Name should have field length 30 instead of 255. There may be some input fields where large data input is necessary, for such fields proper validation of input should be performed prior to saving that data in the application. Moreover, in such fields any html tags or script tag input must be prohibited. In order to provoke XSS attacks, the application should discard script redirects from unknown or untrusted applications.

SQL Injection : A SQL injection attack consists of insertion or “injection” of a SQL query via the input data from the client to the application.

Any User-controlled parameter that gets processed by the application might be hiding vulnerability.

This includes:

1) Application parameters in query strings (e.g., GET Requests)

2) Application parameters included as part of the body of a POST request.

3) Browser-related information (e.g., user-agent, referrer)

4) Host-related information (e.g., host name, IP)

5) Session-related information (e.g., user IDE, cookies)

Classes of SQL Injection:

1) Inband : Data is extracted using the same channel that is used to inject the SQL code. This is the most straightforward kind of attack, in which the retrieved data is presented directly in the application web page.

2) Out-of-band : Data is retrieved using a different channel (e.g., an email with the results of the query is generated and sent to the tester)

3) Inferential: There is no actual transfer of data, but the tester is able to reconstruct the information by sending particular requests and observing the resulting behaviour of the DB server. 

How to test SQL Injection and XSS

Tester must ensure that maximum lengths of all input fields are defined and implemented. (S)He should also ensure that defined length of input fields does not accommodate any script input as well as tag input. Both these can be easily tested e.g. if 20 is the maximum length specified for 'Name' field; and input string "<p>thequickbrownfoxjumpsoverthelazydog" can verify both these constraints. It should also be verified by the tester that application does not support anonymous access methods. In case any of these vulnerabilities exists, the application is in danger.

Types of Tests that can be conducted :

The tester has to :

1) make a list of all input fields whose values could be used in crafting a SQL query, including the hidden fields of POST request and then test them separately.

2) Try to interfere with the query andto generate an error , He can add a single quote (‘), (;), comments (--) or SQL keywords like ‘AND’ or ‘OR’.

3) Standard SQL injection :

1) Union query SQL injection

2) Blind SQL injection

3) Store procedure injection

Prevention of SQL injection :

Application have to:

1) Validate and to sanitize all user input

2) Never use dynamic SQL

3) Execute using an account with few privileges

4) Hash or encrypt their secrets

5) Present error messages that reveal little if no useful information to the hacker.

Cross-Site Scripting (XSS) :

It occurs any time, raw data from attacker is sent to an innocent user’s browser

Typical Impact:

1) Steal user’s session, steal sensitive data, rewrite web page, redirect user to phishing or malware site.

2) Most severe: Install XSS proxy which allows attacker to observe and direct all user’s behavior on vulnerable site and force user to other sites.

XSS attacks is used for :

1) Hijacking accounts

2) False Advertising & inserting hostile content

3) Cookie theft/poisoning & defacing websites

4) Changing of users settings

5) Conducting phishing attacks 

Prevention of XSS Attack:

1) Input Validation :

A) Check if the input is what you expect

1) Do not try to check for “bad input”

B) Black list testing is no solution

1) Black lists are never complete

C) White list testing is better

1) Only what you expect will pass

2) Regular expressions

2) HTML coding: HTML coding of all input when put into output pages.

3) Cookie options mitigate the impact :

A) “httpOnly” cookies

B) “secure” cookies. Cookies are only sent over SSL.

5) Service Access Points (Sealed and Secure Open):

Today, businesses depend and collaborate with each other, same holds good for applications especially websites. In such case, both the collaborators should define and publish some access points for each other. So far the scenario seems quite simple and straightforward but, for some web based product like stock trading, things are not so simple and easy. When there is large number of target audience, the access points should be open enough to facilitate all users, accommodating enough to fulfill all users' requests and secure enough to cope with any security-trial.

How to Test Service Access Points

Let me explain it with the example of stock trading web application; an investor (who wants to purchase the shares) should have access to current and historical data of stock prices. User should be given the facility to download this historical data. This demands that application should be open enough. By accommodating and secure, I mean that application should facilitate investors to trade freely (under the legislative regulations). They may purchase or sale 24/7 and the data of transactions must be immune to any hacking attack. Moreover, a large number of users will be interacting with application simultaneously, so the application should provide enough number access point to entertain all the users.

In some cases these access points can be sealed for unwanted applications or people. This depends upon the business domain of application and its users, e.g. a custom web based Office Management System may recognize its users on the basis of IP Addresses and denies to establish a connection with all other systems (applications) that do not lie in the range of valid IPs for that application.

Tester must ensure that all the inter-network and intra-network access to the application is from trusted applications, machines (IPs) and users. In order to verify that an open access point is secure enough, tester must try to access it from different machines having both trusted and untrusted IP addresses. Different sort of real-time transactions should be tried in a bulk to have a good confidence of application's performance.  By doing so, the capacity of access points of the application will also be observed clearly.

Tester must ensure that the application entertains all the communication requests from trusted IPs and applications only while all the other request are rejected. Similarly, if the application has some open access point, then tester should ensure that it allows (if required) uploading of data by users in secure way. By this secure way I mean, the file size limit, file type restriction and scanning of uploaded file for viruses or other security threats. This is all how a tester can verify the security of an application with respect to its access points.