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.