Colorful world-of-visual-automation-testing-latest

Editor's Notes

• #5: - We have 5.6 million visitors and 180 million page views per month - We hold more than 25 million resumes in our databases - We have more than 75 (seventy five thousand) customers.
• #6: SW Test Academy is a technical software testing blog. We generally share technical articles on test automation, performance testing, security testing, DevOps practices and continuous integration. You can also join our newsletter and stay tuned for the latest articles.
• #7: What is Visual Test Automation? Why do We Need to do Visual Testing? Why do We Automate? What are the Challenges? Visual Test Automation Tools Brief Overview of Visual Test Automation Tools Detailed Reviews (Applitools Eyes, Percy.io, Galen Framework) Selenium & ImageMagick & Ashot Example Q&A
• #8: Visual test automation is a software test automation activity which verifies that the GUI is displayed as expected to the end users. We check shapes, colors, locations of elements and verify that UI itself correctly displayed. By using Selenium, we do UI test automation. We interrogate, manipulate web elements and add verifications to check system’s functionality.
• #9: There mustn't be any overlap between each element. People may ridicule about your system. If you are a WordPress Template company or if you provide a mobile app generation core which outputs ipa (IOS) and apk (Android) files, your product has to generate visually correct results. Beucase, customers rely on your product and it must be functionally and visually perfect.
• #10: - It is not feasible to cover all test matrix in a sprint. It takes too much time. - In agile world, release cycles are getting shorter. - If you do manual visual testing sprint by sprint, your eyes are getting blind and you can not detect the bugs.
• #11: Basically, antialiasing means making the edge of an image much smoother and nicer. This enhances image quality. Because of graphics card’s rendering engine or antialiasing option settings, images rendered not the same in each machine. Thus, if we do pixel by pixel comparison, we will get mismathces and our test will fail.
• #12: The another big challenge is dynamic content in visual testing. You have to do something to eliminate this problem such as hiding those elements, stopping them or wait to finish animations etc.
• #13: Auto-kerning and dynamic letter movements sometimes causes mismatches thus visual testing tool has to be configured to handle this kind of movement problems. For example, adding pixel paddings sometimes causes offset problems. Your tool has to be capable to handle this problem. Also, there are many problems exists in visual testing. We have to handle them with strategies and our tool’s capabilities.
• #15: PhantomJS runs on Wekit and pure headless browser. SlimerJS runs on Gecko (firefox) and not natively headless browser. Resemble.js analyses and compares images with HTML5 canvas and JavaScript.
• #16: Define specific areas/Exclude specific areas/Sync Taken Images/Multiple ResolutionsWebdriverCSS has sync option to use your taken images any environment. WebdriverCSS isn't yet compatible with WebdriverIO v3.0
• #17: Look-same is a node.js library for comparing images It has strict mode like Applitools Eyes and you can modify tolerance, pixel ratio, antialiasing and text caret option.
• #18: Configurations done by .yaml files (snap_file, domains, directory, screen-widths etc.)
• #19: Add a Test Group Add a Browser Add Pages Run Test 
• #26: You can find the details of this example on swtestacademy.com. First, we open Bitbar apk….
• #27: Step2: Install Appium, Android SDK, and GenyMotion Emulator (because it is faster). Then do required settings.
• #31: Passing Test Scenario
• #32: Failing Test Scenario
• #34: Who knows GalenFramework?
• #35: LAYOUT: It tests location of objects relatively to each other on a page. RESPONSIVE: It Opens  Resizes  Runs the Tests based on given Galen Specifications. Grid: You can test responsive websites on different mobile devices and resolutions.Parallel: Tests runs faster and we save time.
• #40: First, we need to declare web elements Then, we can put tags for our pages by using equality sign Also, we can group elements by using @on desktop declaration Under the desktop, we can write our elements location We can do image comparison with given error ratio. And we can use loops to handle list elements
• #41: First, we need to set the browser size with required dimensions.((JavascriptExecutor) driver).executeScript("returndocument.documentElement.clientWidth")((JavascriptExecutor) driver).executeScript("returndocument.documentElement.clientHeight") http://isgarlo.tumblr.com/post/110815604942/webdriver-how-to-set-the-browser-viewport-size
• #42: Step1: We check Layout with Galen.checklayout() function and get layoutReport Step2: We get Galen Test Information based on layoutReport Step3: We build HTML report based on Galen Test Information Step4: If there is a layout problem, test asserts a fail.
• #49: Does anyone know Percy? Or Did anybody use Percy before?
• #50: RESPONSIVE: We should simply provide a list of breakpoint widths and then Percy take care of the rest. ANIMATIONS: It freezes different kinds of animations that can cause false-positive visual diffs.1) It freezes animated GIFs on the FIRST FRAME. 2) It freezes most CSS animation and transition styles
• #51: Static: A command-line client for static websites.
• #52: You can push your code changes or do pull request to the github repository then Jenkins triggered and run your tests, Percy takes DOM snapshots and uploads to Percy Server, and then it compares them with the Baseline images and you will see «4 visual diffs need review»  and when you approved them you will see that "@OnurBaskirt approved 4 visual differences".
• #53: Add all installed tools to system path. Ember, Phantoms.js, Bower, npm, and node.
• #54: Save this variables to use Jenkins or another CI tool.
• #55: Start Jenkins with Admin User. It is so critical to prevents “is not recognized command” problems.
• #57: For taking elements snapshots, we can use scope option. When we use header’s CSS path, it takes header screenshot
• #59: You can do responsive desing testing with Ember Percy very easily. You need to declare your environments widths and give tags to them such as desktop, mobile, tablet. Also you can define default Breakpoints. When you run your tests, you can override default breakpoints at percySnapshot’s function.
• #60: When we run our test, at first run Percy does not do any comparison. It saves all images as baseline.
• #61: This is the Passing Test Scenario
• #62: I played with the test page and I added an extra line to the footer and Percy got the mismatch and highlight it.
• #71: doComparison method is in our BaseTest Class and it comprises of baselineScreenShotPath, actualScreenshotPath and differencesScreenShotPath variables.
• #72: -First we need to do ImageMagick configurations Then, add expected, actual and difference image paths to the ImageOperation object Finally we will use compare.run method to do comparison.
• #73: At first run, code creates Differences and ScreenShots folder and takes baseline screenshot and creates a folder by using test name and put baseline screenshot into this folder. It always takes actual screenshot and put it under test folder. It has not any side effect.
• #74: At seconde run, code checks that is there any baseline image exists? If yes, it compares baseline image with actual one and create a difference image.
• #75: In order to control fail case, I draw some random sketch on baseline image and then run the test again.
• #76: It gives an error and you can see differences both in test folder and differences folder.