![b24-header-cs-e1626637251146.png](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/b24_header_cs_e1626637251146_ecc3d541a8.png)

## What is Brand24?

Brand24 has been on the market since 2011. The company offers tools to monitor the Internet. Brand24 collects publicly available mentions in social media, forums, news and other sources. The company has an impressive group of clients in over 110 countries, including Intel, Stanford University, Zortax, McCann and Wondery. Brand24 supports brands in reaching discussions of their products, services or topics related to business activity. The services provided by Brand24 lead to strengthening and protecting the positive image of a company, its products and services, at the same time providing evaluations of the marketing and PR activities and boosting sales.

## Brand24 challenge

The Brand24 team was looking for a reliable way to monitor complex business processes. The company previously used website monitoring to check if certain WWW addresses were loading without verifying the complete paths taken by users. 
Consequently, the WWW address would load properly from the monitoring point of view, but the website could be displayed incorrectly to the end user *(e.g. no CSS styles loaded)* which would cause the sign up process to fail. 
There were times when clients directly complained to technical support about issues with the application, which damaged the company's image.

## Why did Brand24 choose BugBug.io?
The company *initially* considered Selenium, an Open Source solution, as a way to program end-to-end tests to monitor web and application processes. 

**One of the most important features for Brand24 was the ability to quickly create tests without the involvement of IT**. 

Nonetheless, due to the short time available to the IT department as well as the difficulties associated with maintaining these tests, the company decided to find an alternative. 

As a comprehensive SaaS tool which enables users to easily create and sustain monitoring tests, **BugBug.io was a perfect fit for Brand24’s needs**.

Krzysztof, the Product Manager at Brand24, was assigned the task. As a highly technical PM, he has been able to create the tests as well as set up their cyclical activation without any problems.


## How BugBug resolved the issue

In just **minutes**, Brand24 was able to create its first tests using BugBug.io, without having to code anything.
By using the system for creating tests, while recording the user's activity in the browser, **the initial cost of preparing necessary tests was considerably reduced**. 

![b24_casestudy-p9z4rhj7a7osqgtaui3ty08ctn85l22tkg9d5upb8w.png](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/b24_casestudy_p9z4rhj7a7osqgtaui3ty08ctn85l22tkg9d5upb8w_0779b13eda.png)

Brand24 expected to **continuously monitor the processes**, which was enabled by a cyclical feature that ran the set tests in cloud storage. **Support provided by BugBug.io** for the team work in the project was crucial to the overall success.

### Now it’s your turn

**BugBug.io can help your brand, too**. Automate browser testing with our solution, saving time and resources. [Sign up for free!](https://app.bugbug.io/sign-up/)

thumbnail_b24-header-cs-e1626637251146.png

b24-header-cs-e1626637251146.png

b24-logo-1.png

BugBug.io x Brand24: perfect monitoring of key business processes

brand24

![Holiday park & resort](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/holidaypark_grayscale300x140_4dade3c426.jpg)


## What is Holiday Park? 
Holiday Park is the biggest chain of resorts on the Polish side of the Baltic Sea. The chain offers stays in luxurious chalets and apartments for families on holidays with children. Located just a few steps from the sea, the resorts offer relaxation and comfort to kids and their parents alike. There are a number of activities at Holiday Park, such as swimming pools, playgrounds, beach courts, game rooms, animation for children, and sport classes for guests.

## Holiday Park challenge
The company created an original booking system for luxury resorts located throughout Poland. As time went on, the simple booking system was significantly expanded, causing the **existing manual testing to become inefficient**. With a limited IT team, the company began looking for a solution that would **reduce the amount of work required for testing**; in turn, a suitable tool was chosen. It has happened that **undetected errors prevented reservations** for accommodation, negatively affecting the business as well as the company's image.

## Why did Holiday Park choose BugBug.io?
In order to reduce the IT team's workload, the company was looking for a solution that would stabilize the testing of holiday booking systems. One solution was to use Protractor's framework. Yet the costs and workload associated with creating and maintaining tests exceed the expected figures. 

**The simplicity and rapidity of BugBug.io led to its selection.**

Another reason was **the possibility of adapting the tests** to the developments in the tested application. Holiday Park was particularly interested in **connecting the tests to the internal software development process** (pipeline) - and that’s also enabled by BugBug.

As a comprehensive SaaS tool enabling users to easily create and sustain regression tests, **BugBug.io was a perfect fit for Holiday Park’s needs**.

And in the words of Marcin Baran, team leader at Holiday Park, BugBug is additionally: *“a very user-friendly and useful tool.”*


## How BugBug resolved the issue
Using BugBug, **fundamental tests of a booking system were created in only a few minutes**. The test recorder turned out to **work flawlessly**. 

Then, very quickly, more complicated tests of a multistage booking form were created. The BugBug team recommended that the tests be prepared using reusable components to **make upkeep easier and more efficient**. Consequently, a graph showing the whole project's tested business path was produced. Testing is associated with a process in which they can be run in cloud storage after every release of a new version of the holidaypark.pl application. As a result of this feature, **the company does not have to maintain its own IT infrastructure for this specific purpose**.

Marcin, the IT Team Leader at Holiday Park, appreciates **how easy it is to create and set up BugBug**.

According to him, it is essential that** tests are quickly adapted to changes** made in the application. As well as being able to re-record the steps at any stage of the existing tests, a visual editor can be used to aid in this process.

![hp-cs-img2.png](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/hp_cs_img2_dfa1aebe5b.png)


### Now it’s your turn
**BugBug.io can help your brand, too**. Facilitate regression testing with our solution, saving time and resources. Sign up for free!

thumbnail_holidaypark-grayscale300x140.jpg

holidaypark-grayscale300x140.jpg

BugBug.io x Holiday Park: effective implementation of regression testing

holiday-park

Recording tests in BugBug works surprisingly well. I've tested various competing solutions, but none did as smoothly as BugBug. Krzysztof Studniarek, BRAND24

Customer Success Stories

bugbug_logo_1.png

bugbug_logo_5.png

bugbug_logo_4.png

bugbug_logo_3.png

Case studies

Features

Pricing

Roadmap

Privacy policy

Terms of service

About us

Book a demo

Contact

Get more tips and product related content. Zero spam.

Don't miss any updates

End-to-end testing made simple! BugBug is a new, more intuitive tool for test automation of web apps. Get all the benefits of test automation without hiring new people or infrastructure changes.

BugBug.io | Intuitive and reliable test automation for startups

large_Open Graph 1200x630 3.png

medium_Open Graph 1200x630 3.png

small_Open Graph 1200x630 3.png

thumbnail_Open Graph 1200x630 3.png

Open Graph 1200x630 3.png

Blog about test automation

Software Testing

Test Automation Expert and Test Architect. He is a seasoned tester who can’t stay long in one place. He is looking for perfection and a place to challenge his skills.  He gathered experience working for different companies with different working models, From small to big corporations, From Products via In-house development to software house. Thanks to that he has a wide perspective on testing quality and delivering value.\

[linkedin.com/in/wyrodek/](https://linkedin.com/in/wyrodek/){ref="nofollow"}

large_https://i0.wp.com/wyrodek.pl/wp-content/uploads/2017/01/T1A0194.jpg

medium_https://i0.wp.com/wyrodek.pl/wp-content/uploads/2017/01/T1A0194.jpg

small_https://i0.wp.com/wyrodek.pl/wp-content/uploads/2017/01/T1A0194.jpg

thumbnail_https://i0.wp.com/wyrodek.pl/wp-content/uploads/2017/01/T1A0194.jpg

https://i0.wp.com/wyrodek.pl/wp-content/uploads/2017/01/T1A0194.jpg

Maciej Wyrodek

Testing can be difficult, it is hard to master, there are many questions and many issues we can face with each new feature, each new story. Every day, testers need to decide what to test, how to test, what to automate, and what risks to accept. These decisions are hard and require a lot of experience. Fortunately, there are techniques, heuristics, and models which can help with planning tests. One of the oldest and still very useful techniques is **Agile Testing Quadrants** (**ATQ**). it is a simple table that helps us select the tools we need to use, depending on the required outcome. In this article, we will look into the history of Agile Testing Quadrants, their uses, and limitations. We will also discuss the attempts at modernizing it.

![Agile-Testing-Quadrants](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/Agile_Testing_Quadrants_4b2d044860.png)

[TABLE_OF_CONTENTS]


## Agile Testing Quadrants or Agile Testing Matrix?

First, we need to clear one thing: as with everything in IT, even this simple table needs to have many names! Chances are that you will come across it as an Agile Matrix, Testing Matrix, Testing Quadrants, or Agile quadrants. All of them refer to the same thing. The only exception is the Agile Testing Matrix which may refer to both Agile Testing Quadrants and its precursor the Named Agile Testing Matrix. 

![Testing matrix](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/test_matrix_00ac277513.jpg)


## The Story of Matrix

When speaking about **Testing in Agile**, there is probably not a single more important person to its development than [Lisa Crispin](https://lisacrispin.com/) and [Janet Gregory](https://janetgregory.ca/). Their book, [Agile Testing](https://www.goodreads.com/book/show/5341009-agile-testing), has helped many testers. [Testing Pyramid ](https://bugbug.io/blog/software-testing/testing-pyramid-a-successful-approach-to-test-automation/) was born while [Mike Cohn](https://twitter.com/mikewcohn) tried to explain the nuances of automation to Lisa’s team (*Experience of Test Automation - chapter 1 Section 1.3.*) Agile Testing Book played a key role in the popularization of Agile Testing Quadrants, where the creation of ATQ is often misattributed to this wonderful duo. As Lisa Crispin explained in [her blog](https://lisacrispin.com/2011/11/08/using-the-agile-testing-quadrants/) - they improved on the older concept by [Brian Marick](http://www.exampler.com/old-blog/2003/08/22/#agile-testing-project-2) - an Agile Testing Matrix created as part of his blog series presenting his vision of testing in Agile. So Agile Testing Quadrants have almost 20- year-long history and they are still one of the best models used for testing.

## The Usefulness of Agile Testing Quadrants

Agile Testing Quadrants have two axes which split the matrix into 4 quadrants. Both axes pose the same questions, namely **What is the goal of your testing?** The major difference between the two axes is the flavor of the question: the horizontal axis asks what is currently more important: helping the team to deliver faster or ensuring that the product is as good as possible? the vertical axis asks if we are concentrating on the aspects of technology, ensuring that everything is working well, or are we looking from the perspective of business and customers, making sure that our program is worth using? Obtaining both answers points to one of the Quadrants with a list of useful examples. This can be a little confusing, so let’s look at some of the examples.

### Example 1: E-commerce shop

Let’s say we have e-commerce shop development that is going nicely. However, there is one enormous risk on the horizon, namely quite a lot of features, each tested separately so no one is sure how they will work in the real world. The team believes that the standard paths will work. However, no one is sure what kind of edge cases will come from the real world.

Looking at our matrix we can see that problem is definitely business-facing - we don’t know what the user will do. We also need to make sure that our product will handle it, ergo - Critique Product.
Looking at it we land in Q3  where we have propositions of the following techniques:
 - Exploratory Testing
 - Scenarios
 - Usability Testing
 - User Acceptance Testing (UAT)
 - Alpha/Beta Testing.

So our goal is to find edge cases. Looking at the list, all the techniques could prove helpful. But some may require too much investment so late in the developments (Scenarios). Some are a poor fit for an e-commerce shop (alpha/beta testing, UAT). Which leaves us with Usability Testing and Exploratory testing.
ATQ is not an extensive matrix, it contains only examples of techniques rather than a complete list. For example, a different technique that could help is [Dogfooding](https://en.wikipedia.org/wiki/Eating_your_own_dog_food) where company employees themselves use a product to satisfy their everyday needs.

### Example 2: Messaging App

A company has made a very successful messaging app, but now they are facing the problem of success. Their small app, designed for a small community, is gaining popularity fast. The team feels that the app is not ready for all this attention. The situation is clear - from a business perspective, everything works well enough. The risk is technology, and again the problem lies in the critique of a product. This leads us to Q4 where we have, among others, *Performance* and *Security* testing. There is no doubt that we will need both. Lots of users mean a load on an application and nothing will kill its momentum like failing servers. Security is also important. Attention also attracts bad actors who will try to exploit the system.

### Example 3: Early Development.

The team suffers a problem of poor quality code. In the case of some features, developers are reluctant to fix a familiar bug because of the high risk of breaking something else. One glance at the ATQ shows that we need something to support the development and its technology which leads us straight to Q1. Both Unit Test and Component Test would improve team productivity and code quality.

The above example may give a wrong impression that Agile Testing Quadrants are used to select one and only one tool. **THIS IS NOT TRUE**: we can use ATQ for each goal of our testing, for each need, for each problem we are trying to address. However, trying to improve too much at once may lead to too much-wasted effort and no result. Concentrate on one subject at a time.

## Evolution

While the concept of AQT has changed little over the years, the techniques in each quadrant have evolved, for example: 

![Updated Agile Testing Quadrants](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/updated_atq_06346e83b7.jpg)

In [More Agile Testing](https://www.informit.com/articles/article.aspx?p=2253544), the author presented a new version with Micheal Hüttermann changes, with a circle of *Outside-in, Barrier-free, Collaborative in the middle of the quadrants*. The author believes that it will stretch beyond any quadrants. The main issue with this update is that it is a catchphrase and provides no information about the tools and techniques that may help.

![Agile Testing Quadrants next iteration](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/Agile_Testing_Quadrants_next_d74569f53c.jpg)

A few years back, [Lisa and Janet](https://agiletester.ca/applying-the-agile-testing-quadrants-to-continuous-delivery-and-devops-culture-part-1-working-towards-continuous-delivery/) also presented a version more in line with DevOps. This version adds a lot more techniques to each of the quadrants but also changes one side, from *Supporting Team to Guide Development*. While it may seem like a single name change, fortunately, the original name leads to many misunderstandings and the new label is much more descriptive. 

![RST Agile Testing Ecosystem 1.1](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/bb_ATQ_1fb44a3b67.png)


Michael Bolton and James Bach have also made the [above version](https://www.slideshare.net/HcmcStc/the-new-agile-testing-quadrants-bringing-skilled-testers-and-developers-together-james-bach) which is compatible with Rapide Software Testing. Most of these updates are only fine-tuning, adding elements that their author thinks are better in this context. So which one to choose? It is the author’s opinion that the original version holds well? It is still relevant, because:

## It is just a model.

“All models are wrong, but some are useful” is an old aphorism attributed to George Box. And it is important to bear it in mind in the case of Test Pyramid, Agile Testing Quadrants, etc. Models are what they are: models which need to help us think about a problem. **They are not the golden rules that should be followed in the letter**. They provide us with a good way of tackling the problem. But it is up to the user to decide if a specific model will work for a specific problem.

## Summary

The **Agile Testing Quadrant** is a model which is nearly 20 years old. Owing to its simplicity, it is still relevant. It is a great tool for teams and testers who have a problem with choosing the right testing method. For junior testers, it is a great place to look into different tools and approaches, and for more advanced testers it will be an excellent aid in building or improving the testing process.

large_beetle-g2d0bd3bb5_1280.jpg

medium_beetle-g2d0bd3bb5_1280.jpg

small_beetle-g2d0bd3bb5_1280.jpg

thumbnail_beetle-g2d0bd3bb5_1280.jpg

beetle-g2d0bd3bb5_1280.jpg

Agile Testing Quadrants

agile-testing-quadrants

A self-taught software QA Engineer working at an IT start-up, Dominika has experience in
web testing. Currently, she is focusing on developing her test automation skills with Python.
Apart from programming, she likes to make pottery and cook vegetarian delicacies.\

[linkedin.com/in/dominika-nykiel](https://linkedin.com/in/dominika-nykiel){rel="nofollow"}

medium_https://media-exp1.licdn.com/dms/image/C5603AQH6NBuKQg3UWw/profile-displayphoto-shrink_800_800/0/1637439945009?e=1646265600&v=beta&t=IwBmGAWmNdXvprRNzsLB-PbwuPFXBTKFfTLP612yEuA

small_https://media-exp1.licdn.com/dms/image/C5603AQH6NBuKQg3UWw/profile-displayphoto-shrink_800_800/0/1637439945009?e=1646265600&v=beta&t=IwBmGAWmNdXvprRNzsLB-PbwuPFXBTKFfTLP612yEuA

thumbnail_https://media-exp1.licdn.com/dms/image/C5603AQH6NBuKQg3UWw/profile-displayphoto-shrink_800_800/0/1637439945009?e=1646265600&v=beta&t=IwBmGAWmNdXvprRNzsLB-PbwuPFXBTKFfTLP612yEuA

https://media-exp1.licdn.com/dms/image/C5603AQH6NBuKQg3UWw/profile-displayphoto-shrink_800_800/0/1637439945009?e=1646265600&v=beta&t=IwBmGAWmNdXvprRNzsLB-PbwuPFXBTKFfTLP612yEuA

Dominika Nykiel

An aspiring technical writer with an interest in testing and a knack for learning languages.
Former journalist, translator, and editor, whose work was published in several magazines. She
speaks French and Norwegian and is looking forward to learning Spanish.\

[linkedin.com/in/aleksandra-spilkowska](https://linkedin.com/in/aleksandra-spilkowska){rel="nofollow"}

large_a_spilkowska_cropped.jpg

medium_a_spilkowska_cropped.jpg

small_a_spilkowska_cropped.jpg

thumbnail_a_spilkowska_cropped.jpg

a_spilkowska_cropped.jpg

Aleksandra Spilkowska

Ask any QA Engineer worth their salt about their Chrome extensions - they probably have a bunch of them ready to go at all times. And for a good reason! They can come in handy when you need to edit a screenshot, clear a browser cache, or test a website’s performance. Saving some clicks and double-checking for hidden issues means that a QA’s everyday life is much easier, and it leaves more time to focus on spotting all the bugs before the final product is released. Get ready to pimp your browser with some of the most useful Chrome extensions for testers!

[TABLE_OF_CONTENTS]

## [Monosnap](https://chrome.google.com/webstore/detail/monosnap/lhgadannddhdpkfhfjjgcpdjhpmjhkfm){rel="nofollow"}

![Monosnap](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/monosnap_a19cbb03a1.png)

A reliable recorder is a must-have in your virtual toolbelt. While most recorders are programs, Monosnap is an extension so there are extra advantages, especially if you tend to switch between devices a lot. You can capture a GIF or a video, a selected area of the screen, and of course a fullscreen. There is also a set of basic editing features such as drawing, creating marks, highlighting details, or hiding sensitive data. No watermark in sight! Monosnap works with both Windows and iOS.

## [Clear cache](https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en){rel="nofollow"}

![Clear Cache](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/clearcache_ec20bd645f.png)

It does just what the name promises: clears your cache and browsing data. What's the catch? There isn't any! You can do it all with a single click. This extension allows you to choose how much data you want to clear and from which domains you want the cookies removed. Neat!

## [Bug Magnet](https://chrome.google.com/webstore/detail/bug-magnet/efhedldbjahpgjcneebmbolkalbhckfi){rel="nofollow"}

![Bug Magnet](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/bugmagnet_115b949485.png)

For many, this is a go-to extension for exploratory testing. Will it do all the work for you? Unfortunately, the answer is no, but it sure helps a lot. This exploratory testing assistant will offer you access to common boundaries and edge cases. It works on input fields, text areas, content editable DIVs, and more. This means that you don’t need to rack your brain to think of an email, postcode, or address anymore, Following selection of the value, Bug Magnet fills in the field you need. It’s an open-source solution and you can customize it to your liking.

## [PerfectPixel](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi){rel="nofollow"}

![Perfect Pixel](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/perfectpixel_6d7ba283bd.png)

This extension is very convenient for frontend testing, especially when there is a need to compare a website design with frontend changes. It adds a semi-transparent overlay over the top of the developed HTML to make it perfect - down to the last pixel. The position, size, and opacity level are no longer your enemies with this handy extension.

## [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm){rel="nofollow"}

![WebDeveloper](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/webdeveloper_827b9ef3f7.png)

The Swiss Army knife of web developing tools, this extension will equip your browser with a toolbar full of functional items. Cookies? Managed. Information? Anchored. Web elements? Highlighted. CSS? Edited. Forms? Populated. Of course, some tools work better than others, and you aren’t going to use all of them equally, just like with a real Swiss Army knife (fish scaler, anyone?) but it’s still a quite useful quality multitool.

## [Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en){rel="nofollow"}

![LightHouse](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/lighthouse_f51d97d7ce.png)

Yet another multi-use extension, it runs overall non-functional tests on websites. The metrics you can audit are performance, SEO, best practices, accessibility, PWA (Progressive Web Application). Lighthouse auto-generates a clear, simple report which lets you know how well your website performs for an average user. The audit will instantly highlight the areas that need improvement and will give you a general overview of the website’s functionality.  

## [Postman Interceptor](https://chrome.google.com/webstore/detail/postman-interceptor/aicmkgpgakddgnaphhhpliifpcfhicfo?hl=en){rel="nofollow"}

![Postman Interceptor](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/postman_interceptor_a0d0b62ce1.png)

Assuming you have heard of Postman (if you haven’t, [go check it out now](https://www.postman.com/){rel="nofollow"}!), you might be interested in further improving the workload with this practical extension. The Interceptor sends requests which use browser cookies to the Postman app without using a proxy. This is an advantage for testing APIs, as Interceptor makes it possible to send headers (typically restricted by Chrome).

## [SelectorsHub](https://chrome.google.com/webstore/detail/selectorshub-xpath-plugin/ndgimibanhlabgdgjcpbbndiehljcpfh){rel="nofollow"}

![SelectorsHub](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/selectors_hub_624439475b.png)

Whether you’re a seasoned tester or just starting your journey, this extension can be a worthy addition to your collection. SelectorsHub is easily the top-rated XPath & cssSelector plugin available now, and it lives up to the hype. It helps write and verify XPath and cssSelector in less than 5 seconds, auto-suggests attributes, text, etc. SelectorsHub not only supports the iframe and the SVG elements, it is also the only extension supporting shadowDOM (at least for now). And if you value a proper error message, you’ll get one for missing elements in the selectors. This impressive extension is indispensable not just in test automation but also to users of codeless, smart testing tools.

## Summary

That’s it! We hope you have enjoyed our pick. Of course, this list is in no way comprehensive, as new extensions are added to the Chrome web store all the time. While the choice might initially seem overwhelming, it is highly recommended to checkout various extensions and find the ones that suit your needs best. Hopefully, this article will be a good starting point for these explorations!


large_leaf-gfcaac0297_1280.jpg

medium_leaf-gfcaac0297_1280.jpg

small_leaf-gfcaac0297_1280.jpg

thumbnail_leaf-gfcaac0297_1280.jpg

leaf-gfcaac0297_1280.jpg

Best Chrome Extensions for Software Testers

best-chrome-extensions-for-software-testers

Professional Quality Evangelist, experienced in testing web and mobile applications.\

[linkedin.com/in/kinga-witko-b5bba659/](https://www.linkedin.com/in/kinga-witko-b5bba659/){ref="nofollow"}

thumbnail_https://pbs.twimg.com/profile_images/1410220490434744328/eqEl_DXL_400x400.jpg

https://pbs.twimg.com/profile_images/1410220490434744328/eqEl_DXL_400x400.jpg

Kinga Witko

As recent data show (https://gs.statcounter.com/browser-market-share), Chrome is the most used browser in the world, representing over 64% of the browser market.

The Chrome Developer Tools (DevTools for short) are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers with improved access to the internals of the browser and their web application. Did you know that they are quite useful for the Testers as well?

[TABLE_OF_CONTENTS]

## Give it a try in testing the web

There are multiple functions in which Dev Tools may support your testing, not only limited to:
- resizing (change user agents)
- screen rotation
- using Console: Debug JS – CSS, Logs
- network manipulation: Throttling, Performance
- security testing
- location change
- looking for elements (id)
- taking screenshots
- clearing cache
- test recording
- database checking (IndexedDB  - a transactional database system, like the SQL-based RDBMS)

## How to enter?
To open the developer console in Google Chrome, open the Chrome Menu in the upper-right-hand corner of the browser window and select **More Tools > Developer Tools**. 

![https://i.imgur.com/fIMFZgz.png](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/f_IMF_Zgz_bea99d61c0.png)

You can also take shortcuts:

**On Mac:** \
Command+Option+I 

**On Windows/Linux:** \
F12 or Control+Shift+ I


You can dock your DevTools window to the right of your viewport or at the bottom of the screen, depending on your preferences. By default, DevTools are docked to the right of your viewport. You can also dock to bottom, dock to left, or undock to DevTools to a separate bottom.

![https://i.imgur.com/13JgWaO.png](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/13_Jg_Wa_O_2e4ec2b59e.png)

It is possible to reorder the panels so they suit your needs best. Click and drag a panel tab to change its ordering. Your custom tab order persists across the DevTools sessions.


## How to start
Chrome DevTools can be used in web and mobile testing. Every Tester should take advantage of it because these tools are free and easily accessible. 
Here is a list of the most useful ideas for testing purposes. Maybe you'll come up with new ones?

### Resizing and Rotating
It is important to check the UI of your website on mobile browsers and multiple screen resolutions. For some people, it’s “Just the UI” testing but do remember that nowadays a lion’s share of the market (54.37%) belongs to mobile browsers ([stats here](https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet)).

![Browser market stats](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/image7_6614995465.png)

Use the **Responsive** option in Chrome DevTools to make sure that a majority of different screen resolutions is covered.

You can select the desired resolution from the dropdown list of many different mobile devices to test against different screen sizes. DevTools tell us the screen dimensions of the device in the top menu as well. What is more, you are also able to rotate the screen. Screen rotation is a common cause of mobile bugs, as the mobile website layout changes when the screen is rotated, and page elements may need to reload. While it won't pretend to be the real device, it will give you a lot of hints on what other tests should be performed on your application.

![DevTools resizing and rotating](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/image6_02544f7f6a.png)

### Console - debug

Either a developer or a tester can debug a website on a mobile device.
In the JavaScript **Console** you can find all ranges of errors in the application.
As the complexity of JavaScript applications increases, developers need powerful debugging tools to help quickly discover the cause of an issue and fix it efficiently. The Chrome DevTools include several useful tools to make debugging JavaScript less painful.

![DevTools console](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/image9_aee0e7d98e.png)

### Network and Throttling
The **Network** option allows you to observe the order and time of loading elements. You are provided with insights into resources that are requested and downloaded over the network in real-time. It is of special importance in mobile testing as users expect mobile apps to work smoothly and fast.
1. Open DevTools (F12)
2. Click the ‘Network’ tab
3. Click the No Throttling dropdown
4. Select the type of connection you want to imitate
5. Reload the page to see the assets downloading at that connection speed.

The Network tab in Chrome DevTools has an option to faux throttle your network, so you can experience what your users might see visiting your website on 3G, Offline, or with your real speed connection. The **Throttling** option is also useful for visualizing how fonts are loaded. The lower the speed, the more end-user frustration on your website.

In this section, in the left upper corner, there is also a record button that allows you to preserve all the activities (logs) and compare them with other test results.

![DevTools network throttling](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/image8_9e4f1f589f.png)

### Elements
The Elements panel allows you to see everything in one DOM tree and fosters inspection and on-the-fly editing of DOM elements. It is also a useful option for automating tests.
You can always access this option for a specific element on the website:
1. Mouse-over the element (word, button, etc.)
2. Right-click on the mouse
3. Click Inspect

![DevTools Elements](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/image12_3c7cc49608.png)

In the Chrome DevTools panel, you’ll be directed to the very element in the DOM structure.
The **Elements** tab is extremely useful if you need to play around with CSS in your application. Sometimes you need to switch on and off some buttons/lists/checkboxes. It is possible in this section to select the desired elements in the DOM structure and edit them in the Styles sub-section. 

There is also a handy way of locating a node element in the DOM using a CSS selector. From the elements panel, use a keyboard shortcut (win: Ctrl+f, mac: Cmd+f) to open up the search input UI. Enter a CSS selector into the search input UI.

### Clear Site Data
Cache clearing is one of the activities that might be used daily in the testing exercise. Chrome DevTools can successfully help you out.
Press Control+Shift+P or Command+Shift+P (Mac) to open the Command Menu and then run the Clear Site Data command to clear all data related to the page, including Service workers, localStorage, sessionStorage, IndexedDB, Web SQL, Cookies, Cache, and Application Cache.
If you don't want to delete all site data, you can control what data are deleted from **Application >  Storage**.

![DevTools application storage](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/image10_3278490be8.png)

### Location
This is a fantastic functionality! It shows how to test an app that must work in different locations and presents a map for you - teleportation has not been invented yet! There is an option in DevTools that allows you to mimic location. The option is slightly hidden:
1. Open Dev Tools
2. Click the action bar in the top right corner of the screen
3. Select More Tools
4. Click Sensors

Now you can provide a website/application with your desired geo-coordinates and pretend you are there. Remember about reloading the page with every change to the coordinates.

![DevTools location](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/image11_d0b495da83.png)

### Performance monitor

In the same **More Tools** panel you can find the Performance Monitor. Use it to get a real-time view of various aspects of a page's load or runtime performance, including:
- CPU usage.
- JavaScript heap size.
- The total number of DOM nodes, JavaScript event listeners, documents, and frames on the page.
- Layouts and style recalculations per second.

There is also a separated **Performance** tab in the upper menu, which shows the Compute Intersections in the flame chart. These options can help you to identify the events and debug on its potential performance overheads.

![DevTools Performance](https://bugbug-homepage.s3.eu-central-1.amazonaws.com/image13_7323c216c2.png)

### Screenshots
There are two ways of taking screenshots when working with DevTools:

**Screenshots of a portion of the viewport**

1. Click **Inspect** or press Command+Shift+C (Mac) or Control+Shift+C (Windows, Linux) to enter Inspect Element Mode.
2. Hold Command (Mac) or Control (Windows, Linux) and select the portion of the viewport if which you want to take a screenshot.
3. Release the mouse. DevTools downloads a screenshot of the selected portion.

**Screenshots of specific HTML nodes**

1. Select an element in the Elements tab
2. Open the Command menu
3. Start typing node and select Capture node screenshot. DevTools downloads a screenshot of the selected node.

## How to operate on mobile devices?
Last but not least, if you want to test the mobile option, it might be useful to know how to attach your device to Chrome DevTools.

1. Install the Chrome browser on your PC
2. Get hold of an Android smartphone
3. Find a USB cable to connect them
4. Plug your device in.
5. Type chrome://inspect in the Chrome browser.

On mobile devices, you can take advantage of Chrome Developer Tools in a very similar way to web testing. You can perform throttling, look for elements, or check the network connection. What is more, you are also able to check things in a database through Stetho (*debug bridge for Android applications*). 

If it doesn’t work right away - all you need to do is enable the developer options:
1. Open settings
2. Go to System> About phone>Version number
3. Tap on it 7 times (that’s right)

And there you go.
1. Open the developer options
2. Switch them on
3. Allow USB debugging

From now on the device should be visible in Chrome/inspect.
 
There is much more to Chrome DevTools - all you need is to explore the options. Each year, Chrome adds new functionalities to its extensions, including DevTools. The number of options expands and allows not only for better development but also better testing without multiple external tools or applications. For basic functional testing, Chrome DevTools is more than enough. They just require time to learn how to best use them and to benefit from all the resources they offer. 
