 more into automation, both manual and automation but a big fan of automation I try to try and figure out ways to automate things that become too rigorous for me on a day-to-day basis. So in that process while I am working on a project which has responsive website, you know what responsive website is right, has everyone heard about it? So while working on one such project one day I decided I can't do it manually so then I started figuring out ways to automate it and this talk is based on my experience on automating the responsive websites. Okay, so first things first, what is responsive web design? I have seen a lot of heads nodding and they said they know responsive websites, so any answers? Yeah, yeah it's the content fits the device, can you be more specific by device? What do you mean? Very high level, the definition is the definition of responsive web design as per Encyclopedia is or Wikipedia is, so the browser or the website should match or should fit the content based on the end user screen resolution or screen size for that. So just quickly let's walk through the evolution of responsive web design, right? How come responsive web design come into picture? So if you remember CSS was introduced in 1997, that's when websites became really popular, right? And mobiles did not come into picture until the 21st century, right? Until 2000 there was no mobile, even though there was mobile, there is no question of having websites on mobile, they were just Nokia, people want the strongest mobile, right? But when mobile started getting the ability to have internet on them, that's when people started thinking how can we provide websites on mobile, right? Also for people who have been in IT for long time, you would have known websites existing in two different domains, namely www.domine.com or m.domine.com. So whenever you are opening it on a browser, on a desktop, it loads www. And whenever you are opening it on a mobile, it opens m. Right? So this was the approach that was followed in issue. So quickly, do we see a problem here? Is there an issue having two different domains? What could be the development effort or what could be the risks that are associated? Effort is the same, content that is rendered is the same. There are different contents that are being rendered, right? You cannot render the same content. Do you still think the effort is the same? Yeah, exactly, exactly, right? There is a lot of code duplicacy. You have two different repositories maybe, which has the same code, almost the same code, right? Except that few parts are visible on desktop and they are not visible on mobile. Which is a lot of effort for the developers, right? Say for example, you are adding a new page to your website. You go to www. And build that website, build that page and push that code and the same has to be done for m.website also. So this was the large effort that was put in in the initial stages. Now, fast forward from 2007 to 2010, people started realizing, okay, maybe there could be a way where we can reutilize the websites on both mobile and desktop. So that is when people started thinking about grid layers, right? Instead of thinking of entire web page as a real estate, people started looking at it as an elastic paper. So your website is no longer a static size, it is elastic, right? It is going to stretch on a bigger screen and it is going to shrink on a smaller screen. Now, what happened? Because it is a grid based layout, you need to develop your components so that they can fit into those grids, right? Is that clear question or is it too technical? I did not understand when I first tried because it is two developer key terms. But yeah, that is how it was built. But then the problem there is, right, you can do it if you know your fixed size. Okay, my grid size is going to be this many pixels by this many pixels. Then what happened? Fast forward from 2007 to 2010, mobile industry has boomed a lot. There is MicroMap, there is Nokia, Samsung, BlackBerry, iPhone and there are lots and lots of devices coming into market every other day, right? Can we quickly show the mobile? One player, I mean what is Samsung? Everything has a different screen size, right? Now the question is, okay, we are planning to support mobile. But how do we support all these varying revolutions? That was the biggest challenge for the development. Now what they started to do was, instead of just looking it as the grid layout, they started to look at websites in relative terms, right? Instead of seeing, I found my, say, CSS is this many pixels. They started calling it in relative terms. You must have heard it or you must have seen it in your websites. They call it in relative terms, EMs or 100% of view port. Say it should be 50% or 30%. So it is all relative terms. Relative to what? Relative to your screen size, right? So that is how the response website or web design came into picture. Any questions so far? Are any thoughts? Right. So we are talking about the content, right? Which is fine, which is just the text. If you say on desktop, maybe it's of bigger size and on mobile, it's a smaller size. What happens to the images and videos? Like nowadays, we see all the websites have these fancy images, right? Open the website. The first thing you see is a big banner or big carousel with the image. Everyone looked at CSS code that your developers have returned. As Homeshaker said, what we're going to do is we are not using the same image across all the screen sizes. What we do is we use something called media crisis. So what this does is you could have different images that are loaded based on your screen size. So it looks something like when my max width is say 480 pixel, always pick this particular image. And when it's between 480 to 720, pick this image, which allows you to have scalable images, right? I could show you an example. Say for example, an event which ThoughtWorks organizes, it's called Vodka, value-oriented discussion for quality elements. If you see here, there's this big carousel, right, which has image in the background. So now on a bigger screen, this is the big image that it's loading. But what happens if I shrink? If you see, it's still not the same image. My focus is shifted. Now if you see the total image looks the same, but the content or the focus of the image is shifted to something else. And this can be achieved just by configuring your media queries to fetch a different image based on the screen size. Why don't get the term user agent? The browser will know what size it is, right? So your CSS can be loaded based on that. I'm not sure about the implementation, but yeah, that could be one way they're fetching the screen size and based on the screen size, we fetch the media, which is typically the media client, right? That's the response to just any question so far, right? This is how the responsive websites work, right? So you have a content which is rearranging it till, pre-shuffling it till based on the screen sizes. So that's it. Now, we talked about responsive website. We talked how hard it is for developers to build a website. Now let's talk about the testing efforts, right? I mean, I'll just make the other one more going to say whether it passes or not. So what could be the challenge? Let's cover this part. Devices, someone said devices. Yes, devices, right? That's the biggest challenge. There are so many devices in this room, right? Imagine a website like, you know, Facebook.org, which is used by millions of users. And if your customer is someone who has a large user base, it's definitely going to be paying for the testers to decide how to test on this very number of devices. And we also know that every other day there is new device in the market with new screen sizes and new resolutions. It's pretty cool. 5-inch. 10-inch. 10-inch. To test all the website and all the resolutions. So how do I do it? How can we deal with the viewport sizes and start testing? Let me stop there. So it's hard to test on all the devices, right? We know. Testing is never 100% complete. So what we can do here is have a discussion with your business owners and decide on different buckets. What are the screen resolutions or screen sizes that matters most for their users, right? Maybe you could say all the iPhone 6s, 6, 5s and all have the same screen size. They fall under one bucket. And all your tablets fall under one bucket. And so does your large screens, your desktop or what are fall under one bucket. So you divide them into range. Say 480 to 720 is 1. And 720 to 960 is 1. And 960 to above is one bucket. And based on that, the business has to say, okay, in this bucket, this is how my website is going to look like. And in this particular bucket, this is how it's going to look like. And so in the mobile. So maybe on the desktop you have all the content there. Best example, Facebook. So how many of you notice the ads that pop up on the Facebook? They come on mobile as well. No, they don't. Right? So it's based upon what is the content that you want to deliver to your end customer. That's how you design your website based on the screen side. Right? So this is the discussion that you have with your business owners to get an understanding of what is the sample set that you want to pick up for your text. Right? Now once you have the sample set, okay, we know a particular bucket that we want to focus our text. That's the follow up problem. We are going into CEICD, right? Continuous integration and continuous deployment. We say, okay, let's push to release in one week or two weeks within the story. What is the problem? What is still not solved in the testing? Website on devices and we are trying to see whether all the content is loaded because there's no way to automate it yet. So this delivers the interesting differentiation between testing versus checking, right? Checking can be done by missions, but testing can only be done by humans. So it's ultimately human judgment that's going to say whether this is going to pass or fail. Right? So it's still not solving the problem. Dividing into bucket itself is not solving the problem of response of everybody. So that's when there are several things that you need to keep in mind when you want to say, okay, my website is really good and I can say, okay, it can be sent to production. The first and foremost thing is pages should be readable and all resolution, right? This is the basic criteria. And the second thing is contents define important. So business has certain things that they want to be displayed on each and every resolution. For example, the website I showed, the carousel is more important. There is a register button which is more important for the website which should be available across all the resolution. And the menu bar might shrink or not available at all depending on the requirements. And these are the... So this is no particular priority, but these are the things you keep in mind while you're testing the response. The last one here, which is the data entry, right? Your input boxes, the way it responds. So on a website you might have really length text box but on mobile you have it shrink to a smaller size, right? When you're entering data, it is easy to enter the data or you're able to see the input text at the end of it. So these are the things you keep in mind while you're testing the website for its response manually. Okay, moving on. So the biggest challenge here is selecting a set of devices, right? We still have to have devices in particular buckets and then we need to see how the frequency is on the UI. Requirements keep changing, right? People are moving towards a giant. So you need to keep in mind, okay, if I am going to change this particular page here, I need to verify all the resolutions to make sure this hasn't broken UI on any of the requirements caused by a bigger challenge. Like I always mentioned, manual testing is a huge effort. You can never be satisfied with just with your manual testing, right? And someone suggested emulators. So we all know emulators are not going to give us the 100% results, right? And emulators are really good if you are testing the mobile application. But response websites are a different category where you're just dealing with the website. It's no more an application. So you need not go in the way of using emulators and struggling with the emulators, but whether there are other ways of achieving the technology. So my favorite tools that I have used most frequently while doing the response website testing are these. I can quickly show you these two and we'll move on to Gallant. Processor stack, I think we already know. Most of you might have heard of Processor Stack in the start. So this is also one of my favorite tools. And ApliTool is also one of the paid tools where you can take screenshots of your website on different resolutions and you would go and look at the screenshots and see that everything is working. So let's quickly look into this responsive web design texture. It's nothing but a Chrome plugin. This is the plugin that responds to web design texture. So what it does is it has the predefined list of devices. So whenever you select a particular device, it's going to open your browser. Open your browser in that particular screen size and you can just look at your website. Okay, it looks good. So there are predefined set of devices. You can add more devices. This is Chrome plugin which was there for a really long time and then Chrome became intelligent and they started something like this. So they provided a responsive web design texture built in with the developer tools where you can also select the device. You can add more devices, add more resolution based on your request. So this is the second plugin. Onto Galen. Has anyone heard of Galen? Or why did you write? So I can start from scratch. So Galen is an open source stretching framework. I'm a big fan of open source tools. So while there are several other manual testing tools across the stack, I started researching open source tools and that's when I stepped on Galen framework. It was developed by a guy called Ivan Shubin. He is the person who initially brought up this idea of developing a framework just for responsive web design. And currently there are around 23 contributors for Galen. It has been around for almost 3 years now but recently it has been gaining momentum between the testing community and the UI developer. So it uses Selenium instantly. So it uses Selenium to actually open the browser and resize the browser and do the validation. How does Galen work? So Galen has something called a spec file. Like every language has a spec file like you write something. Galen has a spec file too. So what you do is first you come up with the device resolution or device screen sizes that you want to test on and then you write a spec file saying ok Galen, if my screen size is mobile this is how my website should look like the screen size is tablet this is how it should look like and if it's desktop this is how it should look like. So when you specify that for Galen what Galen does this? Whenever you say Galen run this spec file it opens the browser for the specified screen sizes and runs the checks that you have made. Perform all the operations like easy visible clickable blah blah blah and not provide you the feedback on whether the element is actually in the screen resolution at this particular height below this element or above this particular element. So Galen provides you that flexibility to test the layout instead of whether the element is functional or not. So how I would approach is I would write my Selenium test the functionality and I would write a very thin layer of Galen to test the layout. I would say ok my logo should always be on top left corner my menu bar is always on top right corner and my carousel is always below the navigation bar and in the carousel I need to see a register button. So this particular layout testing is something that you can actually use in Galen that's the answer question. You could see that more in the example right. So this can also be used Selenium brick which means you can just plug it in your grid and run it across different screen sizes by parallel. So I have talked about Galen spec very briefly right. So let's understand what a spec is. So how many of you know about Chikubo. That's the language right we are humans we want something that we can read and write and we can understand. So Galen spec file is exactly built with the same concept in mind. They wanted to write the commands that are very readable in plain and simple English language. It's as simple as like I said my menu bar should be on top right corner or my logo should be on top left corner. So this is how you write a spec file and it has it uses very minimal text you need not write pages and pages like Chikubo given so it's very easy to write and very easy to read and understand. We'll quickly see an example of that. This is example of Galen spec file. Look at that for a minute right. Let's try and understand what we are finding. See what we are finding. Pretty simple. So I said to find element on the page. How do you find it using certain locators. So here I said there is a header with CSS something. So this is my object. Now I am defining this section. This is like a comment for the readability purpose. In my header section I said header on desktop header which is defined here it should be 100% and it's height should be approximately 1 or 5 feet. And what happens on the mobile if it's on mobile yeah width is still 100% but my height is just 55 feet because I don't want header to cover half of the screen of my size. Very simple to understand. So this is how you write a Galen spec file. So here I just showed you for header you could write more objects saying logo or my button or carousel in it and then you say ok on desktop this particular object should have this particular name. What we can do right now is I will quickly show you a demo with the same Odca website this spec file I wrote for the website I have objects like Odca image, desktop navigation, mobile menu top section, content section and composite app. Navigation if it's on mobile it's mobile menu and I set the register here button and I set the Odca logo I define all the elements now let's so I define the section called menu bar which is this particular bar right and on menu bar I said if it's on desktop or mobile my Odca image should always be this right no matter whether it's desktop or mobile the logo and on mobile the desktop navigation which is basically this bar should be absent and mobile menu should be visible so on your mobile the desktop navigation is gone but you see a mobile menu right and similarly on desktop desktop navigation should be visible and it should be about top section I define this as my top section so I am giving the layout of it should always be above the top section and my mobile menu is absent similarly I have defined for my top section and etc etc if you see this button right I said the proposed stock button should always be inside content section and its width is greater than 50% and it's the same for desktop or mobile or spec file right let's see how it looks like the folder valentino where it has odca.g spec right so the valent spec file has an extension desktop or mobile the size that we mentioned in the command line and it's performing certain checks so if you see it said okay I checked for your menu bar I checked for your top section and everything everything and the result is passed so let's quickly take a look at the report so if you remember the command that I have given I said hyphen hyphen html reports equals in reports spec right so if I just open the odca.g spec I performed certain checks so I did perform certain checks on your menu bar and let's see what it is so it said odca image is visible so this is the odca image it's visible so you are test passed similarly price of this section and the proposed stock should be inside content section so it highlights beautifully saying that the proposed stock button is inside your content section so your test pass passed okay it's failed let's let's fail it 100% let's just say 10% and we should fail right let's look at the report again okay something went wrong 10% but it's actually so this is how talent captures your screenshot and gives you these beautiful reports any question if you use a selenium right like selenium can be defined for multiple browsers you can also specify talent to run on multiple browsers so that I'll quickly show a test file so instead of running this big command from the command line even I type wrong so talent also provides you the test file which looks something like I said odca page in mobile distribution and it has a URL this and the screen resolution is that check like the check command we get this is the spec file and include all the things that are set similarly for test file so you could just simply run the test file it's a simple command if you need not remember okay same test file is there you can also define which browser you want to run by default it's five off you can also mention chrome or IE or it should I haven't tried on headless mode I only tried it on performance and element on thing you could say is it visible clickable selectable enable not just resizing the browser but we are also doing certain validation which cannot be done with your selenium can you just verify that the width is 100% of your code isn't selenium can I say my position is on the top right corner you have to create a big huge thing that okay this position is blah blah blah so talent is made it easy for you for talent test with your selenium existing selenium test I would typically keep them separate so I know my functionality is passing fine but it's just my UI that's broken and like I said this gives a faster feedback for your UI developer whenever they are making changes on the UI they would just simply run your talent test which is very lightweight which doesn't take much longer to run I'll finish off and they can quickly see that whatever UI changes they have made either you make it easy simpler with talent or you could use something else on top of it ballgallon does that answer your question first question and you had some other questions mobile app I do agree you might have to go to the emulators and see how certain functionalities are being made but when you talk about websites the behavior is going to be changed no matter what the OS is that you are on mobile the browser that is going to change when you are testing on the Safari browser you can make sure that it's going to look the same mobile because your mobile iPhone uses Safari browser same goes with the Chrome so Dalin also provides you an option to do a screenshot comparison it's like you provide a image a static image and you say ok on this page the entire page should look like this image or this part should look like a particular image I am not a fan of doing screenshot comparison because if your text is dynamic your entire suit is going to be sneaky so what I would typically do a screenshot comparison are things like logos or icons notifications which are notification icons to be more specific which are not going to be changed these icons you know they are going to be the same and they should be the same these are the ones I would effort using the screenshot comparison so in Dalin the other the other thing that you get here any browser interaction can be written as a javascript executable command so Dalin provides you an option to write a js file with an execute script like click on this element or submit that element or enter the text and you can save that file in your framework in your test suit and call that file before performing a particular check for example here if I want to click on something here I would just say inject and I would give the javascript file so it will inject the javascript code before performing a particular check by injecting javascript code it is nothing but you are either clicking on an element or entering the text and submitting so you could also make navigations using that but I could be wrong it looks like a functional scenario for me rather than a layout testing if the entire user flow has been changed it is not just a layout that has changed with the Dalin demo like I said Dalin spec has an extension.g spec you can define your objects you can tag your testing mobile or desktop right now I just used to maybe you might use a large screen and a tablet and very tiny mobile depending upon the business requirement every test has its own individual qualities and we also saw this relative position we set near below inside and also this is one beautiful feature that is present in Dalin you could also check the alignments and you could also perform the CSS validations for every element that helps when your font size is changing on different sizes right? on my desktop my font size is 15 pieces so you could also perform validation for every element like I said you could do image comparison you could say this particular element which is an image basically should look like this particular preloaded image that I have you can also validate on the colors I am currently working on a project where a client says ok that should be hash 4 4 4 but it is hash 3 3 3 so in that case these tests make a lot of sense to put it in place just so that the developers are not forgetting to use the right color if you want to take a look at the Dalin that I just showed this is the repo Dalin has this error reporting you can use the initial screenshot give it to the developers and they look this is very fine and this really helps me you know when you just look at the screen inside the outer box but it is not actually inside and you would not notice it but your client would notice it that time Dalin you can just type with your UI you could capture the screenshot and you could do the image comparison also provides you the option to specify the tolerance ok I have this image local image and I have one more image these two images should be the same everything should be the same you need to provide the exact image that you want to compare and sometimes it might happen that there will be one or two pixel differences which you can ignore then you could provide tolerance for Dalin if it is one pixel or two pixel difference it is ok do not fail my test this is Selenium you can use the Java it is on top of Selenium so browser action if you can do it so javascript are only including if you want to perform an action on the browser it is not part of the spec if you want to do an action on the website just an announcement like I showed the vodka website it is Hyderabad vodka website we also have a vodka coming up in Bangalore soon which is on July 6 which is just 2 weeks or 3 weeks more so do visit our vodka website vodka Bangalore and do register as a member you will be very excited to visit all the talks that I have lined up from capture in latest because that is the sector we build on top of captures and Dalin is nothing but using capture is put away go and there is a big blog on how you can type us capture maybe I can share it to the audience so Dalin is not screenshot but I don't see how you could use that screenshot to enter the data and you need some image reading thank you so much