├── .github
    ├── FUNDING.yml
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   └── feature_request.md
    └── workflows
    │   └── python-publish.yml
├── .gitignore
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── MANIFEST.in
├── README.md
├── RobotEyes
    ├── __init__.py
    ├── constants.py
    ├── imagemagick.py
    ├── report_generator.py
    ├── report_utils.py
    ├── reportgen.py
    ├── runner.py
    ├── selenium_hooks.py
    ├── templates
    │   ├── base.html
    │   ├── failed.html
    │   ├── overview.html
    │   ├── passed.html
    │   ├── report.html
    │   └── test.html
    └── web.py
├── basicreport.png
├── images.png
├── overview.png
├── setup.py
└── tests.png


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: jz-jess # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 4 | patreon: # Replace with a single Patreon username
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: # Replace with a single Ko-fi username
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom:  # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
13 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | 
 5 | ---
 6 | 
 7 | **Describe the bug**
 8 | A clear and concise description of what the bug is.
 9 | 
10 | **To Reproduce**
11 | Steps to reproduce the behavior:
12 | 1. Go to '...'
13 | 2. Click on '....'
14 | 3. Scroll down to '....'
15 | 4. See error
16 | 
17 | **Expected behavior**
18 | A clear and concise description of what you expected to happen.
19 | 
20 | **Screenshots**
21 | If applicable, add screenshots to help explain your problem.
22 | 
23 | **Desktop (please complete the following information):**
24 |  - OS: [e.g. iOS]
25 |  - Browser [e.g. chrome, safari]
26 |  - Version [e.g. 22]
27 | 
28 | **Additional context**
29 | Add any other context about the problem here.
30 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | 
 5 | ---
 6 | 
 7 | **Is your feature request related to a problem? Please describe.**
 8 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 9 | 
10 | **Describe the solution you'd like**
11 | A clear and concise description of what you want to happen.
12 | 
13 | **Describe alternatives you've considered**
14 | A clear and concise description of any alternative solutions or features you've considered.
15 | 
16 | **Additional context**
17 | Add any other context or screenshots about the feature request here.
18 | 


--------------------------------------------------------------------------------
/.github/workflows/python-publish.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will upload a Python Package using Twine when a release is created
 2 | # For more information see: https://help.github.com/en/actions/language-and-framework-guides/using-python-with-github-actions#publishing-to-package-registries
 3 | 
 4 | name: Upload Python Package
 5 | 
 6 | on:
 7 |   push:
 8 |     branches:
 9 |       - master
10 | 
11 | jobs:
12 |   deploy:
13 | 
14 |     runs-on: ubuntu-latest
15 | 
16 |     steps:
17 |     - uses: actions/checkout@v2
18 |     - name: Set up Python
19 |       uses: actions/setup-python@v2
20 |       with:
21 |         python-version: '3.x'
22 |     - name: Install dependencies
23 |       run: |
24 |         python -m pip install --upgrade pip
25 |         pip install setuptools wheel twine
26 |     - name: Build and publish
27 |       env:
28 |         TWINE_USERNAME: ${{ secrets.TWINE_USERNAME }}
29 |         TWINE_PASSWORD: ${{ secrets.TWINE_PASSWORD }}
30 |       run: |
31 |         python setup.py sdist bdist_wheel
32 |         twine upload dist/*
33 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | #MacOS
 2 | *.DS_Store
 3 | 
 4 | # Python byte code
 5 | *.pyc
 6 | 
 7 | # IDE
 8 | .idea/
 9 | .vscode
10 | 
11 | # Python Environment
12 | env


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as
 6 | contributors and maintainers pledge to making participation in our project and
 7 | our community a harassment-free experience for everyone, regardless of age, body
 8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
 9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 | 
12 | ## Our Standards
13 | 
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 | 
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 | 
23 | Examples of unacceptable behavior by participants include:
24 | 
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 |  advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 |  address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 |  professional setting
33 | 
34 | ## Our Responsibilities
35 | 
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 | 
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 | 
46 | ## Scope
47 | 
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 | 
55 | ## Enforcement
56 | 
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at iamjess988@gmail.com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 | 
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 | 
68 | ## Attribution
69 | 
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 | 
73 | [homepage]: https://www.contributor-covenant.org
74 | 
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | Email me @ iamjess988@gmail.com if you have a feature request.
2 | Raise a pull request for any enhanement or bug fixes. Assign to jz-jess for review.
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Jesse Zacharias
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/MANIFEST.in:
--------------------------------------------------------------------------------
1 | include LICENSE
2 | recursive-include RobotEyes/templates *


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # RobotEyes
  2 | [![Downloads](https://pepy.tech/badge/robotframework-eyes)](https://pepy.tech/project/robotframework-eyes)
  3 | [![Version](https://img.shields.io/pypi/v/robotframework-eyes.svg)](https://pypi.org/project/robotframework-eyes)
  4 | 
  5 | Visual Regression Library for Robot Framework
  6 | 
  7 | Uses Imagemagick to Compare Images and create a diff image. Custom Report to view baseline, actual and diff images. View passed and failed tests. Blur regions (only for selenium) within a page to ignore comparison (helpful when there are dynamic elements like text etc in a page). Support SeleniumLibrary(tested) , Selenium2Library(tested) and AppiumLibrary(not tested).
  8 | ## Requirements
  9 | - Install the `robotframework-eyes` library using `pip`: 
 10 | ```
 11 |     pip install robotframework-eyes
 12 | ```     
 13 | - Install `Imagemagick` (for mac: `brew install imagemagick`, linux: `apt-get install imagemagick`) <br/>
 14 | 
 15 | -- **Important Imagemagick7: Make sure that you check the _Install Legacy Utilities (e.g. convert, compare)_ check mark in the installation process and that the directory to ImageMagick is in your PATH env variable. Please ensure that compare.exe is in your path env variable. If you still dont see diff images being generated, please downgrade to Imagemagick6** 
 16 | 
 17 | ## Quick-reference Usage Guide
 18 | - Import the Library into your Robot test. E.g: <br/>    
 19 |  ```
 20 |     Library    RobotEyes
 21 |  ```    
 22 | - Call the `Open Eyes` keyword after opening the browser in your selenium test.
 23 | - Use the `Capture Full Screen` and `Capture Element` keywords to capture images.
 24 | - Call the `Compare Images` keyword at the end of the test to compare all the images captured in the respective test.
 25 | - Once done running the tests, report with name `visualReport.html` should be generated at the root of the project
 26 | - You can manually generate the report by running the below command. Eg:<br/>
 27 | ```
 28 |     reportgen --baseline=<baseline image directory> --results=<output directory>
 29 | ``` 
 30 | ## Usage Guide
 31 | This guide contains the suggested steps to efficently integrate `RobotEyes` library into your Robot Framework test development workflow.<br/>
 32 | It also serves as documentation to clarify how this library functions on a high level.
 33 | 
 34 | ## Keyword Documentation
 35 | | Keyword                | Arguments                        | Comments                                                                                    |
 36 | |------------------------|----------------------------------|---------------------------------------------------------------------------------------------|
 37 | | Open Eyes              | lib, tolerance, template_id, cleanup                   | Ex `open eyes  lib=AppiumLibrary  tolerance=5  cleanup=all_passed`                                                |
 38 | | Capture Full Screen    | tolerance, blur, radius, name, redact          | Ex `capture full screen  tolerance=5  name=homepage  blur=<array of locators>` radius=50(thickness of blur) |
 39 | | Capture Element        | locator, tolerance, blur, radius, name, redact |                                                                                             |
 40 | | Capture Mobile Element | locator, tolerance, blur, radius, name, redact |                                                                                             |
 41 | | Scroll To Element      | locator                          | Ex `scroll to element  id=user`                                                             |
 42 | | Compare Images         |                                  | Compares all the images captured in the test with their respective base image               |
 43 | | Compare Two Images     | first, second, output, tolerance | Compares two images captured in the above steps. Takes image names, diff file name and tolerance as arguments Ex: Compare Two Images  img1  img2  diff  10|
 44 | 
 45 | ## Cleanup Options
 46 | This is only set when invoking open eyes
 47 | - all_passed
 48 |   - This will cleanup diff and actual folders that passed
 49 | - diffs_passed
 50 |   - Will only cleanup diffs that passed, leaving actuals in place
 51 | - actuals_passed
 52 |   - Will only cleanup actuals that passed, leaving diffs in place
 53 | - None
 54 |   - Won't do any image folder cleanups (default)
 55 | 
 56 | ### Running Tests ###
 57 | `robot -d results -v images_dir:<baseline_images_directory> tests`<br/>
 58 | If baseline image directory does not exist, RobotEyes will create it.
 59 | If baseline image(s) does not exist, RobotEyes will move the captured image into the baseline directory.
 60 | For example, when running tests the first time all captured images will be moved to baseline directory passed by you (images_dir) <br/>
 61 | **Important** It is mandatory to pass baseline image directory, absence of which will throw an exception.<br/>
 62 | 
 63 | ### Directory structure  
 64 | The `RobotEyes` library creates a `visual_images` directory which will contain two additional directories, named `actual` & `diff`, respectively.<br/>
 65 | These directories are necessary for the library to function and are created by it at different stages of the test case (TC) development workflow.<br/>
 66 | The resulting directory structure created in the project looks as follows:
 67 | 
 68 | <div>
 69 |   <ul class="ascii">
 70 |     <li>visual_images/
 71 |       <ul>
 72 |         <li>actual/
 73 |           <ul>
 74 |             <li>name_of_tc1/
 75 |               <ul>
 76 |                 <li>img1.png</li>
 77 |                 <li>img1.png.txt</li>
 78 |               </ul>
 79 |             </li>
 80 |             <li>name_of_tc2/
 81 |               <ul>
 82 |                 <li>img1.png</li>
 83 |                 <li>img1.png.txt</li>
 84 |               </ul>
 85 |             </li>
 86 |             <li>name_of_tc3/
 87 |               <ul>
 88 |                 <li>img1.png</li>
 89 |                 <li>img1.png.txt</li>
 90 |               </ul> 
 91 |             </li>
 92 |           </ul>
 93 |         </li>
 94 |         <li>diff/
 95 |           <ul>
 96 |             <li>name_of_tc1/
 97 |               <ul>
 98 |                 <li>img1.png</li>
 99 |               </ul>
100 |             </li>
101 |             <li>name_of_tc2/
102 |               <ul>
103 |                 <li>img1.png</li>
104 |               </ul>
105 |             </li>
106 |             <li>name_of_tc3/
107 |               <ul>
108 |                 <li>img1.png</li>
109 |               </ul>
110 |             </li>
111 |           </ul>
112 |         </li>
113 |       </ul>
114 |     </li>
115 |   </ul>  
116 | </div>
117 | 
118 | ### Generating the baseline images
119 | Baseline images will be generated when tests are run the first time. Subsequent test runs will trigger comparison of actual and baseline images.
120 | 
121 | For example:
122 | ```robotframework
123 | *** Settings ***
124 | Library    SeleniumLibrary
125 | Library    RobotEyes
126 | 
127 | *** Test Cases ***    
128 | Sample visual regression test case  # Name of the example test case
129 |     Open Browser    https://www.google.com/    chrome
130 |     Maximize Browser Window
131 |     Open Eyes    SeleniumLibrary(AppiumLibrary)  5
132 |     Wait Until Element Is Visible    id=lst-ib
133 |     Capture Full Screen
134 |     Compare Images
135 |     Close Browser
136 | ```
137 | ### Comparing the images
138 | To compare the images, the following needs to exist in the TC's code:
139 | - Library declaration:
140 | ```robotframework
141 | Library    RobotEyes
142 | ```
143 | - The `Open Eyes` keyword after the `Open Browser` keyword.
144 | - Any of the image capture keywords. E.g `Capture Full Screen`
145 | - The `Compare Images` keyword after capturing the desired images.
146 | 
147 | For Example:
148 | ```robotframework
149 | *** Settings ***
150 | Library    SeleniumLibrary
151 | Library    RobotEyes
152 | 
153 | *** Test Cases ***    
154 | Sample visual regression test case  # Name of the example test case
155 |     Open Browser    https://www.google.com/    chrome
156 |     Maximize Browser Window
157 |     Open Eyes    SeleniumLibrary  5
158 |     Wait Until Element Is Visible    id=lst-ib
159 |     Capture Full Screen
160 |     Compare Images
161 |     Close Browser
162 | ```
163 | After the comparison is completed (i.e. the `Compare Images` keyword in the TC is executed), a difference image will be generated and stored in the `diff` directory.<br/>
164 | Also, a text file will be created containing the result of the comparison between the RMSE (root mean squared error) of the `diff` image and the tolerance set by the user.<br/>
165 | After that, the regular Robot Framework report will raise a failure if the comparison fails.
166 | 
167 | ### Another test example
168 | ```robotframework
169 | *** Settings ***
170 | Library    SeleniumLibrary
171 | Library    RobotEyes
172 | 
173 | *** Variables ***
174 | @{blur}    id=body    css=#SIvCob
175 | 
176 | *** Test Cases ***    
177 | Sample visual regression test case  # Name of the example test case
178 |     Open Browser    https://www.google.com/    chrome
179 |     Maximize Browser Window
180 |     Open Eyes    SeleniumLibrary  5
181 |     Wait Until Element Is Visible    id=lst-ib
182 |     # Below, the optional arguments are the tolerance to override global value, the regions to blur in the image and
183 |     # the thickness of the blur (radius of Gaussian blur applied to the regions) 
184 |     Capture Full Screen    10(tolerance)    ${blur}    50
185 |     Capture Element    id=hplogo
186 |     Compare Images
187 |     Close Browser
188 | ```
189 | 
190 | ### Non web/mobile image comparison tests
191 | You can run plain non web/mobile image comparison tests as well. Here is an example:
192 | ```robotframework
193 | *** Settings ***
194 | Library    RobotEyes
195 | 
196 | 
197 | *** Test Cases ***    
198 | Plain image comparison test case  # Name of the example test case
199 |     Open Eyes    lib=none  5
200 |     Compare Two Images   ref=oldsearchpage.png   actual=newsearchpage.png   output=diffimage.png  tolerance=5
201 | ```
202 | You need to place images to compare within two folders and provide their path while running the tests.<br/>
203 | `robot -d results -v images_dir:<reference_directory> -v actual_dir:<actual_directory>  Tests/nonwebtest.robot`
204 | 
205 | **Important** Do not run non web tests and web/mobile tests together. This will result in errors during report creation.
206 | 
207 | ### Template Tests
208 | When writing a data driven Template Test, you need to provide a unique template_id in order to uniquely save images for each test.
209 | ```robotframework
210 | *** Settings ***
211 | Library  SeleniumLibrary
212 | Library  RobotEyes
213 | 
214 | *** Test Cases ***
215 | Sample test
216 |     [Template]   Sample keyword
217 |     https://www.google.com/   0
218 |     https://www.google.com/   1
219 |     https://www.google.com/   2
220 | 
221 | 
222 | *** Keywords ***
223 | Sample keyword
224 |     [Arguments]  ${url}  ${uid}
225 |     open browser  ${url}  chrome
226 |     open eyes  SeleniumLibrary   template_id=${uid}
227 |     sleep  3
228 |     capture element  id=hplogo
229 |     capture element  id=body  50
230 |     compare images
231 |     close browser
232 | ```
233 | 
234 | ## Tolerance
235 | Tolerance is the allowed dissimilarity between images. If comparison difference is more than tolerance, the test fails.<br/>
236 | You can pass tolerance globally to the `open eyes` keyword. Ex `Open Eyes  lib=SeleniumLibrary  tolerance=5`.<br/>
237 | Additionally you can override global tolerance by passing it to `Capture Element`, `Capture Fullscreen` keywords.<br/>
238 | Ex: 
239 | ```Capture Element  <locator>  tolerance=10  blur=${locators}```<br/>
240 | Tolerance should range between 1 to 100<br/>
241 | 
242 | ## Blurring elements from image
243 | You can also blur out unwanted elements (dynamic texts etc) from image to ignore them from comparison. This can help in getting more accurate test results. You can pass a list of locators or a single locator as argument to `Capture Element` and `Capture Full Screen` keywords.<br/>
244 | Ex: ```Capture Element  <locator>  blur=id=test```
245 | ```
246 |     @{blur}    id=body    css=#SIvCob
247 |     Capture Element   <locator>  blur=${blur}
248 |     Capture Full Screen     blur=${blur}
249 | ```
250 | ## Redacting elements from image
251 | If blurring elements does not serve your purpose, you can redact elements from images. Simply pass a list of locators that you want to redact as argument to the capture keywords.
252 | Ex: ```Capture Element  <locator>  redact=id=test```
253 | ```
254 |     @{redact}    id=body    css=#SIvCob
255 |     Capture Element   <locator>  redact=${redact}
256 |     Capture Full Screen     redact=${redact}
257 | ```
258 | 
259 | ## Basic Report
260 | ![Alt text](/basicreport.png "Basic Report")
261 | 
262 | Basic report should be autogenerated after execution (not supported for pabot). Alternatively, you can generate report by running the following command.</br>
263 | ```
264 |     reportgen --baseline=<baseline image folder> --results=<results folder>
265 | ```
266 | 
267 | **Important: If you want to remotely view the report on Jenkins, you might need to update the CSP setting,
268 | Refer:** https://wiki.jenkins.io/display/JENKINS/Configuring+Content+Security+Policy#ConfiguringContentSecurityPolicy-HTMLPublisherPlugin
269 | 
270 | ## Interactive Report
271 | Robot Eyes generates a report automatically after all tests have been executed. However a more interactive and intuitive flask based report is available.<br/>
272 | 
273 | You can view passed and failed tests and also use this feature to move acceptable actual images to baseline directory.
274 | Run eyes server like this. `eyes --baseline=<baseline image directory> --results=<outputdir>(leave empty if output is at project root)`
275 | 
276 | ![Alt text](/overview.png "Home screen")
277 | ![Alt text](/tests.png "Tests List")
278 | ![Alt text](/images.png "Images")
279 | 
280 | You can move selected images in a testcase by selecting images and clicking on "Baseline Images" button.</br>
281 | You can also move all images of test cases by selecting the test cases you want to baseline and clicking on "Baseline Images" button.</br>
282 | 
283 | **Note: You need to have gevent library installed in the machine to be able to use eyes server.**</br>
284 | 
285 | ## Pabot users
286 | Visual tests can be executed in parallel using pabot to increase the speed of execution. Generate the report using `reportgen --baseline=<baseline images folder> --results=<results folder>` after running the tests.
287 | 
288 | ## Contributors:
289 | [Adirala Shiva](https://github.com/adiralashiva8) Contributed in creating a robotmetrics inspired reporting for RobotEyes.</br>
290 | [DiegoSanchezE](https://github.com/DiegoSanchezE) Added major improvements in the ReadMe.</br>
291 | [Priya](https://www.linkedin.com/in/priyamarimuthu) Contributes by testing and finding bugs/improvements before every release.</br>
292 | [Ciaran Doheny](ciaran@flipdish.ie) Actively testing and suggesting improvements.
293 | 
294 | ## Note
295 | If you find this library useful, you can support me by doing the following:<br/> 
296 |     - Star the repository.<br/>
297 |     - Make a donation via [Paypal](https://paypal.me/jessezach). You can request for features and I will prioritise them for you.</br>
298 | 
299 | For any issue, feature request or clarification feel free to raise an issue in github or email me at iamjess988@gmail.com
300 | 


--------------------------------------------------------------------------------
/RobotEyes/__init__.py:
--------------------------------------------------------------------------------
  1 | from datetime import datetime
  2 | import shutil
  3 | import time
  4 | from threading import Thread
  5 | 
  6 | from PIL import Image
  7 | from robot.libraries.BuiltIn import BuiltIn
  8 | 
  9 | from .constants import *
 10 | from .report_utils import *
 11 | from .imagemagick import Imagemagick
 12 | from .selenium_hooks import SeleniumHooks
 13 | from .report_generator import generate_report
 14 | 
 15 | 
 16 | class RobotEyes(object):
 17 |     output_dir = ''
 18 |     images_base_folder = ''
 19 |     test_name = ''
 20 |     test_name_folder = ''
 21 |     baseline_dir = ''
 22 |     browser = None
 23 |     ROBOT_LISTENER_API_VERSION = ROBOT_LISTENER_API_VERSION
 24 |     ROBOT_LIBRARY_SCOPE = ROBOT_LIBRARY_SCOPE
 25 |     fail = False
 26 |     cleanup_files = None
 27 |     pass_color = 'green'
 28 |     fail_color = 'red'
 29 | 
 30 |     # Keeping this arg to avoid exceptions for those who have added tolerance in the previous versions.
 31 |     def __init__(self, tolerance=0):
 32 |         self.ROBOT_LIBRARY_LISTENER = self
 33 |         self.lib = 'none'
 34 | 
 35 |     def open_eyes(self, lib='SeleniumLibrary', tolerance=0, template_id='', cleanup=None):
 36 |         self._set_cleanup(cleanup)
 37 |         self.tolerance = float(tolerance)
 38 |         self.tolerance = self.tolerance / 100 if self.tolerance >= 1 else self.tolerance
 39 |         self.stats = {}
 40 |         self.fail = False
 41 |         self.baseline_dir = self._get_baseline_dir()
 42 |         self.actual_dir = self._get_actual_dir()
 43 |         self.output_dir = self._output_dir()
 44 |         self.lib = lib
 45 |         self.images_base_folder = os.path.join(self.output_dir, IMAGES_FOLDER)
 46 |         if lib.lower() != 'none':
 47 |             self.browser = SeleniumHooks(lib)
 48 |         self.test_name = BuiltIn().replace_variables('${TEST NAME}')
 49 |         if template_id:
 50 |             self.test_name += '_%s' % template_id
 51 |         self.test_name_folder = self.test_name.replace(' ', '_')
 52 |         print("roboteyestestfolder: %s" % self.test_name_folder)
 53 |         # delete if directory already exist. Fresh test
 54 |         self._delete_folder_if_exists()
 55 |         # recreate deleted folder
 56 |         self._create_empty_folder()
 57 |         self.count = 1
 58 | 
 59 |     # Captures full screen
 60 |     def capture_full_screen(self, tolerance=None, blur=[], radius=50, name=None, redact=[]):
 61 |         tolerance = float(tolerance) if tolerance else self.tolerance
 62 |         tolerance = tolerance/100 if tolerance >= 1 else tolerance
 63 |         name = self._get_name() if name is None else name
 64 |         name += '.png'
 65 |         path = os.path.join(self.path, name)
 66 |         self.browser.capture_full_screen(path, blur, radius, redact)
 67 |         self._fix_base_image_size(path, name)
 68 |         self.stats[name] = tolerance
 69 |         self.count += 1
 70 | 
 71 |     # Captures a specific region in a mobile screen
 72 |     def capture_mobile_element(self, selector, tolerance=None, blur=[], radius=50, name=None, redact=[]):
 73 |         tolerance = float(tolerance) if tolerance else self.tolerance
 74 |         name = self._get_name() if name is None else name
 75 |         name += '.png'
 76 |         path = os.path.join(self.path, name)
 77 |         self.browser.capture_mobile_element(selector, path, blur, radius, redact)
 78 |         self.stats[name] = tolerance
 79 |         self.count += 1
 80 | 
 81 |     # Captures a specific region in a webpage
 82 |     def capture_element(self, selector, tolerance=None, blur=[], radius=50, name=None, redact=[]):
 83 |         tolerance = float(tolerance) if tolerance else self.tolerance
 84 |         tolerance = tolerance/100 if tolerance >= 1 else tolerance
 85 |         name = self._get_name() if name is None else name
 86 |         name += '.png'
 87 |         path = os.path.join(self.path, name)
 88 |         time.sleep(1)
 89 |         self.browser.capture_element(path, selector, blur, radius, redact)
 90 |         self._fix_base_image_size(path, name)
 91 |         self.stats[name] = tolerance
 92 |         self.count += 1
 93 | 
 94 |     def scroll_to_element(self, selector):
 95 |         self.browser.scroll_to_element(selector)
 96 | 
 97 |     def compare_two_images(self, ref, actual, output, tolerance=None):
 98 |         ref += '.png' if ref.split('.')[-1] not in IMAGE_EXTENSIONS else ''
 99 |         actual += '.png' if actual.split('.')[-1] not in IMAGE_EXTENSIONS else ''
100 |         output += '.png' if output.split('.')[-1] not in IMAGE_EXTENSIONS else ''
101 |         tolerance = float(tolerance) if tolerance else self.tolerance
102 |         tolerance = tolerance / 100 if tolerance >= 1 else tolerance
103 | 
104 |         if not ref or not actual:
105 |             raise Exception('Please provide reference and actual image names')
106 | 
107 |         first_path = os.path.join(self.baseline_dir, ref)
108 |         second_path = os.path.join(self.actual_dir, actual)
109 | 
110 |         if os.path.exists(first_path) and os.path.exists(second_path):
111 |             diff_path = os.path.join(self.path, output)
112 |             difference = Imagemagick(first_path, second_path, diff_path).compare_images()
113 |             color, result = self._get_result(difference, tolerance)
114 |             self.stats[output] = tolerance
115 |             text = '%s %s' % (result, color)
116 |             txt_path = os.path.join(self.path, output + '.txt')
117 |             outfile = open(txt_path, 'w')
118 |             outfile.write(text)
119 |             outfile.write("\n")
120 |             img_names = '%s %s' % (ref, actual)
121 |             outfile.write(img_names)
122 |             outfile.close()
123 |             if color == self.pass_color and self.cleanup_files is not None:
124 |                 self._cleanup_passed(self.actual_dir, diff_path)
125 |         else:
126 |             raise Exception('Image %s or %s doesnt exist' % (ref, actual))
127 | 
128 |     def compare_images(self):
129 |         test_name = self.test_name.replace(' ', '_')
130 |         baseline_path = os.path.join(self.baseline_dir, test_name)
131 |         actual_path = os.path.join(self.images_base_folder, ACTUAL_IMAGE_BASE_FOLDER, test_name)
132 |         diff_path = os.path.join(self.images_base_folder, DIFF_IMAGE_BASE_FOLDER, test_name)
133 | 
134 |         if not os.path.exists(diff_path):
135 |             os.makedirs(diff_path)
136 | 
137 |         # compare actual and baseline images and save the diff image
138 |         for filename in os.listdir(actual_path):
139 |             if filename.endswith('.png'):
140 |                 b_path = os.path.join(baseline_path, filename)
141 |                 a_path = os.path.join(actual_path, filename)
142 |                 d_path = os.path.join(diff_path, filename)
143 |                 txt_path = os.path.join(actual_path, filename + '.txt')
144 | 
145 |                 if os.path.exists(b_path):
146 |                     difference = Imagemagick(b_path, a_path, d_path).compare_images()
147 | 
148 |                     try:
149 |                         threshold = float(self.stats[filename])
150 |                     except ValueError:
151 |                         raise Exception('Invalid tolerance: %s' % self.stats[filename])
152 | 
153 |                     color, result = self._get_result(difference, threshold)
154 |                     text = '%s %s' % (result, color)
155 |                 else:
156 |                     shutil.copy(a_path, b_path)
157 |                     color = self.pass_color
158 |                     text = '%s %s' % ('None', color)
159 | 
160 |                 output = open(txt_path, 'w')
161 |                 output.write(text)
162 |                 output.close()
163 |                 if color == self.pass_color and self.cleanup_files is not None:
164 |                     self._cleanup_passed(actual_path, diff_path)
165 |         BuiltIn().run_keyword('Fail', 'Image dissimilarity exceeds tolerance') if self.fail else ''
166 | 
167 |     def _set_cleanup(self, cleanup):
168 |         cleanup_options = [None, 'all_passed', 'diffs_passed', 'actuals_passed']
169 |         self.cleanup_files = None
170 |         if cleanup in cleanup_options:
171 |             self.cleanup_files = cleanup
172 | 
173 |     def _delete_folder_if_exists(self):
174 |         actual_image_test_folder = os.path.join(self.images_base_folder, ACTUAL_IMAGE_BASE_FOLDER, self.test_name_folder)
175 |         diff_image_test_folder = os.path.join(self.images_base_folder, DIFF_IMAGE_BASE_FOLDER, self.test_name_folder)
176 | 
177 |         if os.path.exists(actual_image_test_folder):
178 |             shutil.rmtree(actual_image_test_folder)
179 | 
180 |         if os.path.exists(diff_image_test_folder):
181 |             shutil.rmtree(diff_image_test_folder)
182 | 
183 |     def _create_empty_folder(self):
184 |         if self.lib.lower() != 'none':
185 |             self.path = os.path.join(self.baseline_dir, self.test_name_folder)
186 | 
187 |             if not os.path.exists(self.path):
188 |                 os.makedirs(self.path)
189 | 
190 |         self.path = os.path.join(self.images_base_folder, ACTUAL_IMAGE_BASE_FOLDER, self.test_name_folder)
191 | 
192 |         if not os.path.exists(self.path):
193 |             os.makedirs(self.path)
194 | 
195 |     def _resize(self, *args):
196 |         for arg in args:
197 |             img = Image.open(arg)
198 |             img = img.resize((1024, 700), Image.LANCZOS)
199 |             img.save(arg)
200 | 
201 |     def _fix_base_image_size(self, path, image_name):
202 |         test_name = self.test_name.replace(' ', '_')
203 |         base_image = os.path.join(self.baseline_dir, test_name, image_name)
204 |         if os.path.exists(base_image):
205 |             im = Image.open(path)
206 |             width, height = im.size
207 |             im.close()
208 | 
209 |             im = Image.open(base_image)
210 |             b_width, b_height = im.size
211 |             if width != b_width or height != b_height:
212 |                 im = im.resize((width, height), Image.LANCZOS)
213 |                 im.save(base_image)
214 | 
215 |     def _delete_report_if_old(self, path):
216 |         t1 = datetime.fromtimestamp(os.path.getmtime(path))
217 |         t2 = datetime.now()
218 |         diff = (t2 - t1).seconds
219 |         os.remove(path) if diff > REPORT_EXPIRATION_THRESHOLD else ''
220 | 
221 |     def _output_dir(self):
222 |         output_dir = BuiltIn().replace_variables('${OUTPUT DIR}')
223 | 
224 |         if 'pabot_results' in output_dir:
225 |             index = output_dir.find(os.path.sep + 'pabot_results')
226 |             return output_dir[:index]
227 |         return output_dir
228 | 
229 |     def _get_result(self, difference, threshold):
230 |         difference, threshold = int(difference*100), int(threshold*100)
231 |         if difference > threshold:
232 |             color = self.fail_color
233 |             result = '%s<%s' % (threshold, difference)
234 |             self.fail = True
235 |         elif difference == threshold:
236 |             color = self.pass_color
237 |             result = '%s==%s' % (threshold, difference)
238 |         else:
239 |             color = self.pass_color
240 |             result = '%s>%s' % (threshold, difference)
241 |         return color, result
242 | 
243 |     def _get_baseline_dir(self):
244 |         baseline_dir = BuiltIn().get_variable_value('${images_dir}')
245 |         if not baseline_dir:
246 |             BuiltIn().run_keyword('Fail', 'Please provide image baseline directory. Ex: -v images_dir:base')
247 | 
248 |         os.makedirs(baseline_dir) if not os.path.exists(baseline_dir) else ''
249 |         return baseline_dir
250 | 
251 |     def _get_actual_dir(self):
252 |         return BuiltIn().get_variable_value('${actual_dir}')
253 | 
254 |     def _get_name(self):
255 |         return 'img%s' % str(self.count)
256 | 
257 |     def _cleanup_passed(self, actuals_path, diff_path):
258 |         if self.cleanup_files == 'diffs_passed':
259 |             self._cleanup_passed_files([diff_path])
260 |         elif self.cleanup_files == 'actuals_passed':
261 |             self._cleanup_passed_files([actuals_path])
262 |         else:
263 |             self._delete_folder_if_exists()
264 | 
265 |     @staticmethod
266 |     def _cleanup_passed_files(test_paths):
267 |         for test_path in test_paths:
268 |             if os.path.exists(test_path):
269 |                 shutil.rmtree(test_path)
270 | 
271 |     def _end_test(self, data, test):
272 |         if hasattr(self, 'lib') and self.lib.lower() == 'none':
273 |             if self.fail:
274 |                 test.status = 'FAIL'
275 |                 test.message = 'Image dissimilarity exceeds tolerance'
276 | 
277 |     def _close(self):
278 |         if self.baseline_dir and self.output_dir:
279 |             thread = Thread(
280 |                 target=generate_report,
281 |                 args=(self.baseline_dir, self.output_dir, self.actual_dir,)
282 |             )
283 |             thread.start()
284 | 


--------------------------------------------------------------------------------
/RobotEyes/constants.py:
--------------------------------------------------------------------------------
 1 | IMAGES_FOLDER = 'visual_images'
 2 | ACTUAL_IMAGE_BASE_FOLDER = 'actual'
 3 | DIFF_IMAGE_BASE_FOLDER = 'diff'
 4 | BASELINE_IMAGE_BASE_FOLDER = 'baseline'
 5 | MODE_TEST = 'test'
 6 | MODE_BASELINE = 'baseline'
 7 | REPORT_FILE = 'visualReport.html'
 8 | REPORT_EXPIRATION_THRESHOLD = 10
 9 | IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'bmp', 'raw', 'pdf']
10 | ROBOT_LIBRARY_SCOPE = 'GLOBAL'
11 | ROBOT_LISTENER_API_VERSION = 3


--------------------------------------------------------------------------------
/RobotEyes/imagemagick.py:
--------------------------------------------------------------------------------
 1 | import subprocess
 2 | 
 3 | 
 4 | class Imagemagick(object):
 5 | 
 6 |     def __init__(self, img1, img2, diff):
 7 |         self.img1 = img1
 8 |         self.img2 = img2
 9 |         self.diff = diff
10 | 
11 |     def compare_images(self):
12 |         compare_cmd = 'compare -metric RMSE -subimage-search -dissimilarity-threshold 1.0 "%s" "%s" "%s"' \
13 |                       % (self.img1, self.img2, self.diff)
14 | 
15 |         attempts = 0
16 |         while attempts < 2:
17 |             proc = subprocess.Popen(compare_cmd,
18 |                                     stdout=subprocess.PIPE, stderr=subprocess.PIPE, shell=True)
19 | 
20 |             out, err = proc.communicate()
21 |             print('Comparison output: %s' % err)
22 |             diff = err.split()[1][1:-1]
23 | 
24 |             try:
25 |                 trimmed = float(diff)
26 |                 return trimmed
27 |             except ValueError:
28 |                 if attempts == 0:
29 |                     print('Comparison failed first time. Output %s' % err)
30 |                     compare_cmd = 'magick ' + compare_cmd
31 |                 else:
32 |                     raise Exception('Could not parse comparison output: %s' % err)
33 |             finally:
34 |                 attempts += 1
35 | 


--------------------------------------------------------------------------------
/RobotEyes/report_generator.py:
--------------------------------------------------------------------------------
  1 | import os
  2 | import xml.etree.ElementTree as ET
  3 | from time import sleep
  4 | 
  5 | from .constants import IMAGE_EXTENSIONS
  6 | 
  7 | def generate_report(baseline_folder, results_folder, actual_folder=None):
  8 |     sleep(1)
  9 |     img_path = os.path.join(results_folder, 'visual_images')
 10 |     report_path = os.path.join(results_folder, 'output.xml')
 11 |     relative_baseline_folder_path = relative_path(baseline_folder, results_folder.replace(os.getcwd(), ''))
 12 |     relative_actual_folder_path = relative_path(actual_folder, results_folder.replace(os.getcwd(), '')) if actual_folder else ''
 13 | 
 14 |     html = '''
 15 |     <html>
 16 |     <head>
 17 |         <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
 18 |         <meta content="utf-8" http-equiv="encoding">
 19 |         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 20 |         <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
 21 |         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
 22 |         <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 23 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
 24 |         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 25 |         <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 26 |         <script src="https://code.highcharts.com/highcharts.js"></script>
 27 |         <script src="http://code.highcharts.com/highcharts-3d.js"></script>
 28 |     </head>
 29 |     <body>
 30 |     <div id="piechart"></div>
 31 |     <div class="container" style="position:relative;top:20px;">
 32 |     <table class="table table-striped table-sm" id="results">
 33 |     <thead>
 34 |     <tr>
 35 |     <th></th>
 36 |     <th>Test Name</th>
 37 |     </tr>
 38 |     </thead>
 39 |     <tbody>
 40 |     '''
 41 | 
 42 |     try:
 43 |         tree = ET.parse(report_path)
 44 |     except FileNotFoundError:
 45 |         return
 46 | 
 47 |     for t in tree.findall('.//test'):
 48 |         if not t.findall('.//kw[@name="Open Eyes"]'):
 49 |             continue
 50 | 
 51 |         test_name = t.get('name')
 52 |         folder_name = test_name.replace(' ', '_')
 53 | 
 54 |         # If the test folder does not exist, we know that it's probably a data driven test. Unless there was some other exception.
 55 |         if not os.path.exists(os.path.join(img_path, 'actual', folder_name)):
 56 |             for open_eyes_keyword in t.findall('.//kw[@name="Open Eyes"]'):
 57 |                 # Get the actual test folder name from the message we log within open eyes keyword
 58 |                 folder_name = get_template_test_name(open_eyes_keyword)
 59 | 
 60 |                 if folder_name:
 61 |                     if actual_folder:
 62 |                         html = make_non_web_test_table(html, baseline_folder, relative_baseline_folder_path, img_path,
 63 |                                                        test_name, folder_name, actual_folder,
 64 |                                                        relative_actual_folder_path)
 65 |                     else:
 66 |                         html = make_test_table(html, baseline_folder, relative_baseline_folder_path, img_path, test_name,
 67 |                                         folder_name)
 68 |         else:
 69 |             if actual_folder:
 70 |                 html = make_non_web_test_table(html, baseline_folder, relative_baseline_folder_path, img_path,
 71 |                                                test_name, folder_name, actual_folder, relative_actual_folder_path)
 72 |             else:
 73 |                 html = make_test_table(html, baseline_folder, relative_baseline_folder_path, img_path, test_name,
 74 |                                        folder_name)
 75 |     html += '''
 76 |     </tbody>
 77 |     </table>
 78 |     </div>
 79 |     <style>
 80 |       tr.accordion-toggle:hover {
 81 |         cursor:pointer;
 82 |       }
 83 |       img {
 84 |         image-rendering: pixelated;
 85 |         object-fit: contain;
 86 |       }
 87 |     </style>
 88 |     <script>
 89 |         $(document).ready(function() {
 90 |           var pass = 0;
 91 |           var fail = 0;
 92 |           var t = 1;
 93 |           $("table#innerResults").each(function() {
 94 |             var $items = $(this).find('tbody tr');
 95 |             $.each($items, function(n, e) {
 96 |               color = $(e).find('td:last').css('color');
 97 |               if (color == 'rgb(255, 0, 0)') {
 98 |                 return false;
 99 |               }
100 |             });
101 |             if(color == 'rgb(255, 0, 0)') {
102 |               $('table#results > tbody > tr:nth-child(' + t + ') > td:nth-child(2)').css('color','red');
103 |               t = t+2;
104 |               fail = fail + 1;
105 |             }
106 |             else  {
107 |              $('table#results > tbody > tr:nth-child(' + t + ') > td:nth-child(2)').css('color','green');
108 |              t = t+2;
109 |              pass = pass + 1;
110 |             }
111 |           });
112 | 
113 |           $("tr.accordion-toggle").click(function () {
114 |             classes = {
115 |                 "fa-arrow-down": "fa-arrow-right",
116 |                 "fa-arrow-right": "fa-arrow-down"
117 |             }
118 |             cls = $(this).find('i:first').attr("class").split(" ")[1];
119 |             $(this).find('i:first').removeClass(cls).addClass(classes[cls]);
120 |           });
121 | 
122 |           Highcharts.chart('piechart', {
123 |             chart: {
124 |                 type: 'pie',
125 |                 options3d: {
126 |                     enabled: true,
127 |                     alpha: 45,
128 |                     beta: 0
129 |                 }
130 |             },
131 |             title: {
132 |                 text: 'Test result stats'
133 |             },
134 |             tooltip: {
135 |                 pointFormat: '{series.name}: <b>{point.y:.1f}</b>'
136 |             },
137 |             plotOptions: {
138 |                 pie: {
139 |                     allowPointSelect: true,
140 |                     cursor: 'pointer',
141 |                     depth: 35,
142 |                     colors: ['#32CD32', '#B22222'],
143 |                     dataLabels: {
144 |                         enabled: true,
145 |                         format: '<b>{point.name}</b>: {point.y:.1f}',
146 |                         style: {
147 |                             color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
148 |                         }
149 |                     }
150 |                 }
151 |             },
152 |             series: [{
153 |                 name: 'Count',
154 |                 colorByPoint: true,
155 |                 data: [{
156 |                     name: 'Pass',
157 |                     y: pass,
158 |                     sliced: true,
159 |                     selected: true
160 |                 }, {
161 |                     name: 'Fail',
162 |                     y: fail
163 |                 }]
164 |             }]
165 |           });
166 |         });
167 |     </script>
168 |     </body>
169 |     </html>'''
170 | 
171 |     output_path = os.path.join(os.getcwd(), results_folder, 'visualReport.html')
172 |     print("Creating visual report at %s" % output_path)
173 |     output = open(output_path, 'w')
174 |     output.write(html)
175 |     output.close()
176 | 
177 | def get_template_test_name(open_eyes_keyword):
178 |     for element in open_eyes_keyword.findall('.//msg'):
179 |         if element.text.startswith("roboteyestestfolder"):
180 |             return element.text.split(":")[1].strip()
181 |     return ""
182 | 
183 | def relative_path(baseline_folder, results_folder):
184 |     if baseline_folder.startswith(os.path.sep):
185 |         baseline_folder = baseline_folder[1:]
186 |     # This condition to avoid fixing absolute paths
187 |     if os.path.exists(os.getcwd() + os.path.sep + baseline_folder) and not os.path.isabs(baseline_folder):
188 |         results_folder = results_folder[1:] if results_folder.startswith(os.path.sep) else results_folder
189 |         count = get_count_of_sub_directories(results_folder)
190 |         s = ''
191 |         for i in range(count):
192 |             s = s + ('..' + os.path.sep)
193 |         s += baseline_folder
194 |         return s
195 |     else:
196 |         # Does not exist within project root or absolute path
197 |         return os.path.sep + baseline_folder
198 | 
199 | 
200 | def get_count_of_sub_directories(results_path):
201 |     count = 0
202 |     if not results_path.startswith(os.path.sep):
203 |         results_path = os.path.sep + results_path
204 | 
205 |     for i in range(1, len(results_path)):
206 |         if results_path[i] != os.path.sep and results_path[i-1] == os.path.sep:
207 |             count += 1
208 |     return count
209 | 
210 | 
211 | def make_test_table(html, baseline_folder, relative_baseline_folder_path, img_path, test_name, folder_name):
212 |     html += '''<tr data-toggle="collapse" data-target='div[value="%s"]' class="accordion-toggle">
213 |             <td>
214 |             <button class="btn btn-default btn-sm"><i class="fas fa-arrow-right"></i></button>
215 |             </td>
216 |             <td>%s</td>
217 |             </tr>
218 |             <tr>
219 |             <td colspan="12" class="hiddenRow"><div class="accordian-body collapse" value="%s">
220 |             <table class="table table-bordered table-hover" id="innerResults">
221 |             <thead>
222 |             <tr>
223 |             <th style="text-align:center;vertical-align:middle">Baseline</th>
224 |             <th style="text-align:center;vertical-align:middle">Actual</th>
225 |             <th style="text-align:center;vertical-align:middle">Diff</th>
226 |             <th>Diff value<br><font size="2">(Exp : Actual)</font></th>
227 |             </tr>
228 |             </thead>
229 |             <tbody>''' % (folder_name, test_name, folder_name)
230 | 
231 |     for filename in os.listdir(baseline_folder + os.path.sep + folder_name):
232 |         if filename.endswith('.png'):
233 |             html += '''<tr>'''
234 |             if os.path.exists(os.path.join(baseline_folder, folder_name, filename)):
235 |                 base_img_path = os.path.join(relative_baseline_folder_path, folder_name, filename)
236 |                 html += '''<td><a href="%s" target="_blank"><img src="%s" height="200" width="350"></a></td>''' \
237 |                         % (base_img_path, base_img_path)
238 |             else:
239 |                 html += '''<td></td>'''
240 | 
241 |             if os.path.exists(os.path.join(img_path, 'actual', folder_name, filename)):
242 |                 actual_img_path = os.path.join('visual_images', 'actual', folder_name, filename)
243 |                 html += '''<td><a href="%s" target="_blank"><img src="%s" height="200" width="350"></a></td>''' \
244 |                         % (actual_img_path, actual_img_path)
245 |             else:
246 |                 html += '''<td></td>'''
247 | 
248 |             arr = filename.split('.')
249 |             if os.path.exists(os.path.join(img_path, 'diff', folder_name, filename)):
250 |                 diff_img_path = os.path.join('visual_images', 'diff', folder_name, filename)
251 |                 html += '''<td><a href="%s" target="_blank"><img src="%s" height="200" width="350"></a></td>''' \
252 |                         % (diff_img_path, diff_img_path)
253 |             elif os.path.exists(
254 |                     img_path + os.path.sep + 'diff' + os.path.sep + folder_name + os.path.sep + arr[0] + '-0.png'):
255 |                 diff_img_path = 'visual_images' + os.path.sep + 'diff' + os.path.sep + \
256 |                                 folder_name + os.path.sep + arr[0] + '-0.png'
257 |                 html += '''<td><a href="%s" target="_blank"><img src="%s" height="200" width="350"></a></td>''' \
258 |                         % (diff_img_path, diff_img_path)
259 |             else:
260 |                 html += '''<td></td>'''
261 |             txt_file = img_path + os.path.sep + 'actual' + os.path.sep + \
262 |                        folder_name + os.path.sep + filename + ".txt"
263 |             if os.path.exists(txt_file):
264 |                 infile = open(img_path + os.path.sep + 'actual' + os.path.sep + folder_name +
265 |                               os.path.sep + filename + ".txt", 'r')
266 |                 first_line = infile.readline().strip()
267 |                 arr = first_line.split()
268 |                 infile.close()
269 |                 html += '''
270 |                         <td style="color:%s;">%s</td></tr>''' % (arr[1].lower(), arr[0])
271 |             else:
272 |                 html += '''<td></td></tr>'''
273 | 
274 |     html += '''
275 |             </tbody>
276 |             </table>
277 |             </div>
278 |             </td>
279 |             </tr>'''
280 |     return html
281 | 
282 | 
283 | def make_non_web_test_table(html, baseline_folder, relative_baseline_folder_path, img_path, test_name,
284 |                             folder_name, actual_folder, relative_actual_folder_path):
285 |     html += '''<tr data-toggle="collapse" data-target='div[value="%s"]' class="accordion-toggle">
286 |                 <td>
287 |                 <button class="btn btn-default btn-sm"><i class="fas fa-arrow-right"></i></button>
288 |                 </td>
289 |                 <td>%s</td>
290 |                 </tr>
291 |                 <tr>
292 |                 <td colspan="12" class="hiddenRow"><div class="accordian-body collapse" value="%s">
293 |                 <table class="table table-bordered table-hover" id="innerResults">
294 |                 <thead>
295 |                 <tr>
296 |                 <th style="text-align:center;vertical-align:middle">Baseline</th>
297 |                 <th style="text-align:center;vertical-align:middle">Actual</th>
298 |                 <th style="text-align:center;vertical-align:middle">Diff</th>
299 |                 <th>Diff value<br><font size="2">(Exp : Actual)</font></th>
300 |                 </tr>
301 |                 </thead>
302 |                 <tbody>''' % (folder_name, test_name, folder_name)
303 | 
304 |     test_folder = os.path.join(img_path, 'actual', folder_name)
305 | 
306 |     for filename in os.listdir(test_folder):
307 |         if filename.split('.')[-1] in IMAGE_EXTENSIONS:
308 |             file = open(test_folder + os.path.sep + filename + '.txt', 'r')
309 |             content = file.read()
310 |             result, names = content.split('\n')
311 |             file.close()
312 | 
313 |             names_arr = names.split()
314 |             baseline_img_path = os.path.join(baseline_folder, names_arr[0])
315 |             actual_img_path = os.path.join(actual_folder, names_arr[1])
316 |             html += '''<tr>'''
317 |             if os.path.exists(baseline_img_path):
318 |                 base_img_path = os.path.join(relative_baseline_folder_path, names_arr[0])
319 |                 html += '''<td><a href="%s" target="_blank"><img src="%s" height="200" width="350"></a></td>''' \
320 |                         % (base_img_path, base_img_path)
321 |             else:
322 |                 html += '''<td></td>'''
323 | 
324 |             if os.path.exists(actual_img_path):
325 |                 actual_img_path = os.path.join(relative_actual_folder_path, names_arr[1])
326 |                 html += '''<td><a href="%s" target="_blank"><img src="%s" height="200" width="350"></a></td>''' \
327 |                         % (actual_img_path, actual_img_path)
328 |             else:
329 |                 html += '''<td></td>'''
330 | 
331 |             arr = filename.split('.')
332 |             if os.path.exists(os.path.join(img_path, 'actual', folder_name, filename)):
333 |                 diff_img_path = os.path.join('visual_images', 'actual', folder_name, filename)
334 |                 html += '''<td><a href="%s" target="_blank"><img src="%s" height="200" width="350"></a></td>''' \
335 |                         % (diff_img_path, diff_img_path)
336 |             elif os.path.exists(
337 |                     img_path + os.path.sep + 'actual' + os.path.sep + folder_name + os.path.sep + arr[0] + '-0.png'):
338 |                 diff_img_path = os.path.join('visual_images', 'actual', folder_name) + os.path.sep + arr[0] + '-0.png'
339 |                 html += '''<td><a href="%s" target="_blank"><img src="%s" height="200" width="350"></a></td>''' \
340 |                         % (diff_img_path, diff_img_path)
341 |             else:
342 |                 html += '''<td></td>'''
343 | 
344 |             if result:
345 |                 arr = result.split()
346 |                 html += '''
347 |                             <td style="color:%s;">%s</td></tr>''' % (arr[1].lower(), arr[0])
348 |             else:
349 |                 html += '''<td></td></tr>'''
350 | 
351 |     html += '''
352 |                 </tbody>
353 |                 </table>
354 |                 </div>
355 |                 </td>
356 |                 </tr>'''
357 |     return html


--------------------------------------------------------------------------------
/RobotEyes/report_utils.py:
--------------------------------------------------------------------------------
  1 | import os
  2 | 
  3 | 
  4 | HEADER = '''
  5 |     <html>
  6 |     <head>
  7 |         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  8 |         <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
  9 |         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
 10 |         <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 11 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
 12 |         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 13 |         <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 14 |         <script src="https://code.highcharts.com/highcharts.js"></script>
 15 |         <script src="http://code.highcharts.com/highcharts-3d.js"></script>
 16 |     </head>
 17 |     <body>
 18 |     <div id="piechart"></div>
 19 |     <div class="container" style="position:relative;top:20px;">
 20 |     <table class="table table-striped table-sm" id="results">
 21 |     <thead>
 22 |     <tr>
 23 |     <th></th>
 24 |     <th>Test Name</th>
 25 |     </tr>
 26 |     </thead>
 27 |     <tbody>'''
 28 | 
 29 | 
 30 | INNER_TABLE_END = '''
 31 |         </tbody>
 32 |         </table>
 33 |         </div>
 34 |         </td>
 35 |         </tr>'''
 36 | 
 37 | FOOTER = '''
 38 |     </tbody>
 39 |     </table>
 40 |     </div>
 41 |     <style>
 42 |       tr.accordion-toggle:hover {
 43 |         cursor:pointer;
 44 |       }
 45 |     </style>
 46 |     <script>
 47 |         $(document).ready(function() {
 48 |           var pass = 0;
 49 |           var fail = 0;
 50 |           var t = 1;
 51 |           $("table#innerResults").each(function() {
 52 |             var $items = $(this).find('tbody tr');
 53 |             $.each($items, function(n, e) {
 54 |               color = $(e).find('td:last').css('color');
 55 |               if (color == 'rgb(255, 0, 0)') {
 56 |                 return false;
 57 |               }
 58 |             });
 59 |             if(color == 'rgb(255, 0, 0)') {
 60 |               $('table#results > tbody > tr:nth-child(' + t + ') > td:nth-child(2)').css('color','red');
 61 |               t = t+2;
 62 |               fail = fail + 1;
 63 |             }
 64 |             else  {
 65 |              $('table#results > tbody > tr:nth-child(' + t + ') > td:nth-child(2)').css('color','green');
 66 |              t = t+2;
 67 |              pass = pass + 1;
 68 |             }
 69 |           });
 70 |           
 71 |           $("tr.accordion-toggle").click(function () {
 72 |             classes = {
 73 |                 "fa-arrow-down": "fa-arrow-right",
 74 |                 "fa-arrow-right": "fa-arrow-down"
 75 |             }
 76 |             cls = $(this).find('i:first').attr("class").split(" ")[1];
 77 |             $(this).find('i:first').removeClass(cls).addClass(classes[cls]);
 78 |           });
 79 |           
 80 |           Highcharts.chart('piechart', {
 81 |             chart: {
 82 |                 type: 'pie',
 83 |                 options3d: {
 84 |                     enabled: true,
 85 |                     alpha: 45,
 86 |                     beta: 0
 87 |                 }
 88 |             },
 89 |             title: {
 90 |                 text: 'Test result stats'
 91 |             },
 92 |             tooltip: {
 93 |                 pointFormat: '{series.name}: <b>{point.y:.1f}</b>'
 94 |             },
 95 |             plotOptions: {
 96 |                 pie: {
 97 |                     allowPointSelect: true,
 98 |                     cursor: 'pointer',
 99 |                     depth: 35,
100 |                     colors: ['#32CD32', '#B22222'],
101 |                     dataLabels: {
102 |                         enabled: true,
103 |                         format: '<b>{point.name}</b>: {point.y:.1f}',
104 |                         style: {
105 |                             color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
106 |                         }
107 |                     }
108 |                 }
109 |             },
110 |             series: [{
111 |                 name: 'Count',
112 |                 colorByPoint: true,
113 |                 data: [{
114 |                     name: 'Pass',
115 |                     y: pass,
116 |                     sliced: true,
117 |                     selected: true
118 |                 }, {
119 |                     name: 'Fail',
120 |                     y: fail
121 |                 }]
122 |             }]
123 |           });
124 |         });
125 |     </script>
126 |     </body>
127 |     </html>'''
128 | 
129 | 
130 | def make_parent_row(test_name):
131 |     folder_name = test_name.replace(' ', '_')
132 |     html = '''<tr data-toggle="collapse" data-target='div[value="%s"]' class="accordion-toggle">
133 |             <td>
134 |             <button class="btn btn-default btn-sm"><i class="fas fa-arrow-right"></i></button>
135 |             </td>
136 |             <td>%s</td>
137 |             </tr>
138 |             <tr>
139 |             <td colspan="12" class="hiddenRow"><div class="accordian-body collapse" value="%s">
140 |             <table class="table table-bordered table-hover" id="innerResults">
141 |             <thead>
142 |             <tr>
143 |             <th style="text-align:center;vertical-align:middle">Baseline</th>
144 |             <th style="text-align:center;vertical-align:middle">Actual</th>
145 |             <th style="text-align:center;vertical-align:middle">Diff</th>
146 |             <th>Diff value<br><font size="2">(Exp : Actual)</font></th>
147 |             </tr>
148 |             </thead>
149 |             <tbody>''' % (folder_name, test_name, folder_name)
150 | 
151 |     return html
152 | 
153 | 
154 | def make_image_row(b_path, a_path, d_path, result):
155 |     html = '''<tr>'''
156 | 
157 |     if os.path.exists(b_path):
158 |         html += '''<td><a href="%s" target="_blank"><img src="%s" height="200" width="350"></a></td>''' \
159 |                 % (b_path, b_path)
160 |     else:
161 |         html += '''<td></td>'''
162 | 
163 |     if os.path.exists(a_path):
164 |         html += '''<td><a href="%s" target="_blank"><img src="%s" height="200" width="350"></a></td>''' \
165 |                 % (a_path, a_path)
166 |     else:
167 |         html += '''<td></td>'''
168 | 
169 |     if os.path.exists(d_path):
170 |         html += '''<td><a href="%s" target="_blank"><img src="%s" height="200" width="350"></a></td>''' \
171 |                 % (d_path, d_path)
172 |     else:
173 |         html += '''<td></td>'''
174 | 
175 |     html += '''<td style="color:%s;">%s</td></tr>''' % (result[0], result[1])
176 | 
177 |     return html
178 | 
179 | 


--------------------------------------------------------------------------------
/RobotEyes/reportgen.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | from optparse import OptionParser
 3 | 
 4 | from .report_generator import generate_report
 5 | 
 6 | 
 7 | def parse_options():
 8 |     parser = OptionParser()
 9 | 
10 |     parser.add_option(
11 |         '--baseline',
12 |         dest='baseline',
13 |         default=None,
14 |         help="relative path to where baseline images directory exists"
15 |     )
16 | 
17 |     parser.add_option(
18 |         '--actual',
19 |         dest='actual',
20 |         default=None,
21 |         help="relative path to where actual images directory exists. For non web/mobile tests"
22 |     )
23 | 
24 |     parser.add_option(
25 |         '--results',
26 |         dest='results',
27 |         default=os.getcwd(),
28 |         help="relative path to where results directory exists"
29 |     )
30 | 
31 |     opts, args = parser.parse_args()
32 |     return parser, opts, args
33 | 
34 | 
35 | def report_gen():
36 |     root_folder = os.getcwd()
37 |     parser, opts, arguments = parse_options()
38 |     report_path = os.path.join(opts.results, 'output.xml')
39 |     img_path = os.path.join(opts.results, 'visual_images')
40 | 
41 |     if opts.baseline is None:
42 |         raise Exception('Please provide path to baseline image directory.')
43 | 
44 |     if os.path.exists(root_folder + os.path.sep + report_path) and os.path.exists(root_folder + os.path.sep + img_path):
45 |         generate_report(opts.baseline, opts.results, opts.actual)
46 |     else:
47 |         raise Exception("Please provide a valid path to results.")
48 | 


--------------------------------------------------------------------------------
/RobotEyes/runner.py:
--------------------------------------------------------------------------------
 1 | from optparse import OptionParser
 2 | 
 3 | from . import web
 4 | 
 5 | 
 6 | def parse_options():
 7 |     parser = OptionParser()
 8 | 
 9 |     parser.add_option(
10 |         '--results',
11 |         dest='results',
12 |         default='',
13 |         help="relative path to results folder where visual_images directory exists"
14 |     )
15 | 
16 |     parser.add_option(
17 |         '--baseline',
18 |         dest='baseline',
19 |         default=None,
20 |         help="relative path to results folder where visual_images directory exists"
21 |     )
22 | 
23 |     parser.add_option(
24 |         '--host',
25 |         dest='host',
26 |         default='0.0.0.0',
27 |         help="host on which server should run"
28 |     )
29 | 
30 |     parser.add_option(
31 |         '--port',
32 |         dest='port',
33 |         default=5000,
34 |         help="port on which server should run"
35 |     )
36 |     opts, args = parser.parse_args()
37 |     return parser, opts, args
38 | 
39 | 
40 | def main():
41 |     parser, opts, arguments = parse_options()
42 | 
43 |     web.start(opts.baseline, opts.results, opts.host, opts.port)
44 | 


--------------------------------------------------------------------------------
/RobotEyes/selenium_hooks.py:
--------------------------------------------------------------------------------
  1 | import math
  2 | import platform
  3 | 
  4 | from PIL import Image, ImageFilter, ImageOps
  5 | from robot.libraries.BuiltIn import BuiltIn
  6 | from selenium.common.exceptions import JavascriptException
  7 | from selenium.common.exceptions import NoSuchElementException, NoSuchFrameException
  8 | from selenium.webdriver.common.by import By
  9 | 
 10 | 
 11 | class SeleniumHooks(object):
 12 |     mobile = False
 13 | 
 14 |     def __init__(self, lib):
 15 |         try:
 16 |             s2l = BuiltIn().get_library_instance(lib)
 17 |             if lib == 'AppiumLibrary':
 18 |                 self.driver = s2l._current_application()
 19 |                 self.mobile = True
 20 |             else:
 21 |                 try:
 22 |                     self.driver = s2l.driver #SeleniumLibrary v4
 23 |                 except:
 24 |                     self.driver = s2l._current_browser() #SeleniumLibrary v4--
 25 |         except RuntimeError:
 26 |             raise Exception('%s instance not found' % lib)
 27 | 
 28 |         self.locator_strategies = {
 29 |             'xpath': self._find_element_by_xpath,
 30 |             'id': self._find_element_by_id,
 31 |             'class': self._find_element_by_class_name,
 32 |             'css': self._find_element_by_css_selector
 33 |         }
 34 | 
 35 |     def _find_element_by_xpath(self, xpath):
 36 |         if self.mobile:
 37 |             return self.driver.find_element_by_xpath(xpath)
 38 |         else:
 39 |             return self.driver.find_element(By.XPATH, xpath)
 40 | 
 41 |     def _find_element_by_id(self, id):
 42 |         if self.mobile:
 43 |             return self.driver.find_element_by_id(id)
 44 |         else:
 45 |             return self.driver.find_element(By.ID, id)
 46 | 
 47 |     def _find_element_by_class_name(self, class_name):
 48 |         if self.mobile:
 49 |             return self.driver.find_element_by_class_name(class_name)
 50 |         else:
 51 |             return self.driver.find_element(By.CLASS_NAME, class_name)
 52 | 
 53 |     def _find_element_by_css_selector(self, css_selector):
 54 |         if self.mobile:
 55 |             return self.driver.find_element_by_css_selector(css_selector)
 56 |         else:
 57 |             return self.driver.find_element(By.CSS_SELECTOR, css_selector)
 58 | 
 59 |     def _find_elements_by_tag_name(self, tag_name):
 60 |         if self.mobile:
 61 |             return self.driver.find_elements_by_tag_name(tag_name)
 62 |         else:
 63 |             return self.driver.find_elements(By.TAG_NAME, tag_name)
 64 | 
 65 |     def is_mobile(self):
 66 |         return self.mobile
 67 | 
 68 |     def capture_full_screen(self, path, blur=[], radius=50, redact=[]):
 69 |         self.driver.save_screenshot(path)
 70 | 
 71 |         if blur:
 72 |             self.blur_regions(blur, radius, path)
 73 |             if not self.is_mobile():
 74 |                 initial_frame = self.driver.execute_script("return window.frameElement")
 75 |                 self.driver.switch_to.default_content()
 76 |                 self.blur_in_all_frames(blur, radius, path)
 77 |                 self.driver.switch_to.default_content()
 78 |                 print("Switching back to initial frame and name is %s" % initial_frame)
 79 |                 self.driver.switch_to.frame(initial_frame)
 80 | 
 81 |         # User may want to blur certain elements and redact other elements at the same time.
 82 |         if redact:
 83 |             self._redact_regions(redact, path)
 84 |             if not self.is_mobile():
 85 |                 initial_frame = self.driver.execute_script("return window.frameElement")
 86 |                 self.driver.switch_to.default_content()
 87 |                 self.redact_in_all_frames(redact, path)
 88 |                 self.driver.switch_to.default_content()
 89 |                 print("Switching back to initial frame and name is %s" % initial_frame)
 90 |                 self.driver.switch_to.frame(initial_frame)
 91 | 
 92 |     def blur_in_all_frames(self, blur, radius, path):
 93 |         frames = self._find_elements_by_tag_name("frame")
 94 |         iframes = self._find_elements_by_tag_name("iframe")
 95 |         joined_list = frames + iframes
 96 |         print("Frames: %s" % str(len(joined_list)))
 97 |         for index, frame in enumerate(joined_list):
 98 |             print("Switching to Frame %s" % frame)
 99 |             try:
100 |                 self.driver.switch_to.frame(frame)
101 |             except NoSuchFrameException:
102 |                 continue
103 |             self.blur_regions(blur, radius, path)
104 |             self.driver.switch_to.default_content()
105 | 
106 |     def redact_in_all_frames(self, redact, path):
107 |         frames = self._find_elements_by_tag_name("frame")
108 |         iframes = self._find_elements_by_tag_name("iframe")
109 |         joined_list = frames + iframes
110 |         print("Frames: %s" % str(len(joined_list)))
111 |         for index, frame in enumerate(joined_list):
112 |             print("Switching to Frame %s" % frame)
113 |             try:
114 |                 self.driver.switch_to.frame(frame)
115 |             except NoSuchFrameException:
116 |                 continue
117 |             self._redact_regions(redact, path)
118 |             self.driver.switch_to.default_content()
119 | 
120 |     def capture_element(self, path, locator, blur=[], radius=50, redact=[]):
121 |         self.driver.save_screenshot(path)
122 |         prefix, locator, element = self.find_element(locator)
123 |         coord = self._get_coordinates(prefix, locator, element)
124 |         left, right, top, bottom = self._update_coordinates(
125 |             math.ceil(coord['left']),
126 |             math.ceil(coord['right']),
127 |             math.ceil(coord['top']),
128 |             math.ceil(coord['bottom'])
129 |         )
130 |         self.blur_regions(blur, radius, path) if blur else ''
131 |         self._redact_regions(redact, path) if redact else ''
132 |         im = Image.open(path)
133 |         im = im.crop((left, top, right, bottom))
134 |         im.save(path)
135 | 
136 |     def capture_mobile_element(self, selector, path, blur=[], radius=50, redact=[]):
137 |         prefix, locator, search_element = self.find_element(selector)
138 |         location = search_element.location
139 |         size = search_element.size
140 |         self.driver.save_screenshot(path)
141 |         left = location['x']
142 |         top = location['y']
143 |         right = location['x'] + size['width']
144 |         bottom = location['y'] + size['height']
145 |         self.blur_regions(blur, radius, path) if blur else ''
146 |         self._redact_regions(redact, path) if redact else ''
147 |         image = Image.open(path)
148 |         image = image.crop((left, top, right, bottom))
149 |         image.save(path)
150 | 
151 |     def scroll_to_element(self, selector):
152 |         prefix, locator, search_element = self.find_element(selector)
153 |         self.driver.execute_script("return arguments[0].scrollIntoView();", search_element)
154 | 
155 |     def blur_regions(self, selectors, radius, path):
156 |         selectors = selectors if isinstance(selectors, list) else [selectors]
157 |         for region in selectors:
158 |             try:
159 |                 prefix, locator, element = self.find_element(region)
160 |             except NoSuchElementException:
161 |                 continue
162 | 
163 |             left, right, top, bottom = self._get_coordinates_from_element(element)
164 |             im = Image.open(path)
165 |             cropped_image = im.crop((left, top, right, bottom))
166 |             blurred_image = cropped_image.filter(ImageFilter.GaussianBlur(radius=int(radius)))
167 |             im.paste(blurred_image, (left, top, right, bottom))
168 |             im.save(path)
169 | 
170 |     def _redact_regions(self, selectors, path):
171 |         selectors = selectors if isinstance(selectors, list) else [selectors]
172 |         for region in selectors:
173 |             try:
174 |                 prefix, locator, element = self.find_element(region)
175 |             except NoSuchElementException:
176 |                 continue
177 | 
178 |             left, right, top, bottom = self._get_coordinates_from_element(element)
179 |             im = Image.open(path)
180 |             cropped_image = im.crop((left, top, right, bottom))
181 |             readacted_image = ImageOps.colorize(cropped_image.convert('L'), black='black', white='black')
182 |             im.paste(readacted_image, (left, top, right, bottom))
183 |             im.save(path)
184 | 
185 |     def _get_coordinates_from_element(self, element):
186 |         area_coordinates = self._get_coordinates_from_driver(element)
187 | 
188 |         if self.is_mobile():
189 |             left, right = math.ceil(area_coordinates['left']), math.ceil(area_coordinates['right'])
190 |             top, bottom = math.ceil(area_coordinates['top']), math.ceil(area_coordinates['bottom'])
191 |         else:
192 |             frame_abs_pos = self._get_current_frame_abs_position()
193 |             left, right = math.ceil(area_coordinates['left'] + frame_abs_pos['x']), math.ceil(
194 |                 area_coordinates['right'] + frame_abs_pos['x'])
195 |             top, bottom = math.ceil(area_coordinates['top'] + frame_abs_pos['y']), math.ceil(
196 |                 area_coordinates['bottom'] + frame_abs_pos['y'])
197 | 
198 |         return self._update_coordinates(left, right, top, bottom)
199 | 
200 |     def _get_current_frame_abs_position(self):
201 |         cmd = 'function currentFrameAbsolutePosition() { \
202 |         let currentWindow = window; \
203 |         let currentParentWindow; \
204 |         let positions = []; \
205 |         let rect;  \
206 |         while (currentWindow !== window.top) { \
207 |             currentParentWindow = currentWindow.parent; \
208 |             for (let idx = 0; idx < currentParentWindow.frames.length; idx++) { \
209 |                 if (currentParentWindow.frames[idx] === currentWindow) { \
210 |                     for (let frameElement of currentParentWindow.document.getElementsByTagName("frame")) { \
211 |                         if (frameElement.contentWindow === currentWindow) { \
212 |                             rect = frameElement.getBoundingClientRect(); \
213 |                             positions.push({x: rect.x, y: rect.y}); \
214 |                         } \
215 |                     } \
216 |                     for (let frameElement of currentParentWindow.document.getElementsByTagName("iframe")) { \
217 |                         if (frameElement.contentWindow === currentWindow) { \
218 |                             rect = frameElement.getBoundingClientRect(); \
219 |                             positions.push({x: rect.x, y: rect.y}); \
220 |                         } \
221 |                     } \
222 |                     currentWindow = currentParentWindow; \
223 |                     break; \
224 |                 } \
225 |             } \
226 |         } \
227 |         return positions.reduce((accumulator, currentValue) => { \
228 |             return { \
229 |             x: accumulator.x + currentValue.x, \
230 |             y: accumulator.y + currentValue.y \
231 |             }; \
232 |         }, { x: 0, y: 0 }); \
233 |         }; return currentFrameAbsolutePosition();'
234 | 
235 |         try:
236 |             coordinates = self.driver.execute_script(cmd)
237 |         except JavascriptException:
238 |             coordinates = {"x": 0, "y": 0}
239 |         return coordinates
240 | 
241 |     def find_element(self, selector):
242 |         if selector.startswith('//'):
243 |             prefix = 'xpath'
244 |             locator = selector
245 |         else:
246 |             prefix, locator = self.get_selector_parts(selector)
247 | 
248 |         strategy = self.locator_strategies[prefix]
249 |         search_element = strategy(locator)
250 |         return prefix, locator, search_element
251 | 
252 |     def get_selector_parts(self, selector):
253 |         separators = [':', '=']
254 |         prefix = locator = ''
255 |         for separator in separators:
256 |             selector_parts = selector.partition(separator)
257 |             prefix = selector_parts[0].strip().lower()
258 |             locator = selector_parts[2].strip()
259 |             if prefix in self.locator_strategies:
260 |                 break
261 | 
262 |         else:
263 |             if prefix not in self.locator_strategies:
264 |                 raise Exception('Unknown locator strategy %s' % prefix)
265 |         return prefix, locator
266 | 
267 |     def _get_coordinates(self, prefix, locator, element):
268 |         if self.mobile:
269 |             coordinates = self._get_coordinates_from_driver(element)
270 |         else:
271 |             if prefix.lower() == 'xpath':
272 |                 locator = locator.replace('"', "'")
273 |                 cmd = "var e = document.evaluate(\"{0}\", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null)" \
274 |                       ".singleNodeValue;return e.getBoundingClientRect();".format(locator)
275 | 
276 |             elif prefix.lower() == 'css':
277 |                 locator = locator.replace('"', "'")
278 |                 cmd = "var e = document.querySelector(\"{0}\");return e.getBoundingClientRect();".format(locator)
279 | 
280 |             elif prefix.lower() == 'id':
281 |                 cmd = "var e = document.getElementById(\"{0}\");return e.getBoundingClientRect();".format(locator)
282 | 
283 |             elif prefix.lower() == 'class':
284 |                 cmd = "var e = document.getElementsByClassName(\"{0}\")[0];return e.getBoundingClientRect();" \
285 |                     .format(locator)
286 |             else:
287 |                 raise Exception('Invalid locator %s' % locator)
288 | 
289 |             try:
290 |                 coordinates = self.driver.execute_script(cmd)
291 |             except JavascriptException:
292 |                 coordinates = self._get_coordinates_from_driver(element)
293 | 
294 |         return coordinates
295 | 
296 |     def _get_coordinates_from_driver(self, element):
297 |         coordinates = {}
298 |         location = element.location
299 |         size = element.size
300 |         coordinates['left'] = location['x']
301 |         coordinates['top'] = location['y']
302 |         coordinates['right'] = location['x'] + size['width']
303 |         coordinates['bottom'] = location['y'] + size['height']
304 |         return coordinates
305 | 
306 |     def _update_coordinates(self, left, right, top, bottom):
307 |         if platform.system().lower() == "darwin":
308 |             left = left * 2
309 |             right = right * 2
310 |             top = top * 2
311 |             bottom = bottom * 2
312 |         return int(left), int(right), int(top), int(bottom)
313 | 


--------------------------------------------------------------------------------
/RobotEyes/templates/base.html:
--------------------------------------------------------------------------------
  1 | <html lang="en">
  2 |     <head>
  3 |         <link href="https://img.icons8.com/small/24/000000/iris-scan.png" rel="shortcut icon" type="image/x-icon"/>
  4 |         <title>RobotEyes Report</title>
  5 |         <meta charset="utf-8"/>
  6 |         <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>
  7 |         <meta content="width=device-width, initial-scale=1" name="viewport"/>
  8 | 
  9 |         <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
 10 |         <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 11 |         <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
 12 |         <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
 13 | 
 14 |         <script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
 15 |         <link href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css" rel="stylesheet"/>
 16 |         <link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/css/dataTables.checkboxes.css"
 17 |               rel="stylesheet"/>
 18 |         <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
 19 |         <script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js" type="text/javascript"></script>
 20 | 
 21 |         <script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/js/dataTables.checkboxes.min.js"
 22 |                 type="text/javascript"></script>
 23 |         <!-- Bootstrap core Googleccharts -->
 24 |  ]
 25 |         {% block script %}{% endblock %}
 26 |         <style>
 27 |        .sidebar {
 28 |               position: fixed;
 29 |               top: 0;
 30 |               bottom: 0;
 31 |               left: 0;
 32 |               z-index: 100; /* Behind the navbar */
 33 |               box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
 34 |             }
 35 | 
 36 |             .sidebar-sticky {
 37 |               position: relative;
 38 |               top: 0;
 39 |               height: calc(100vh - 48px);
 40 |               padding-top: .5rem;
 41 |               overflow-x: hidden;
 42 |               overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
 43 |             }
 44 | 
 45 |             @supports ((position: -webkit-sticky) or (position: sticky)) {
 46 |               .sidebar-sticky {
 47 |                 position: -webkit-sticky;
 48 |                 position: sticky;
 49 |               }
 50 |             }
 51 | 
 52 |             .sidebar .nav-link {
 53 |               color: black;
 54 |             }
 55 | 
 56 |             .sidebar .nav-link.active {
 57 |               color: #007bff;
 58 |             }
 59 | 
 60 |             .sidebar .nav-link:hover .feather,
 61 |             .sidebar .nav-link.active .feather {
 62 |               color: inherit;
 63 |             }
 64 | 
 65 |             [role="main"] {
 66 |               padding-top: 8px;
 67 |             }
 68 | 
 69 |             /* Set height of body and the document to 100% */
 70 |             body {
 71 |                 height: 100%;
 72 |                 margin: 0;
 73 |                 //font-family:  Comic Sans MS;
 74 |                 background-color: white;
 75 |             }
 76 | 
 77 |             /* Style tab links */
 78 |             .tablinkLog {
 79 |                 cursor: pointer;
 80 |             }
 81 | 
 82 |             @import url(https://fonts.googleapis.com/css?family=Droid+Sans);
 83 |             .loader {
 84 |                 position: fixed;
 85 |                 left: 0px;
 86 |                 top: 0px;
 87 |                 width: 100%;
 88 |                 height: 100%;
 89 |                 z-index: 9999;
 90 |                 background: url('http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif?e44397') 50% 50% no-repeat rgb(249,249,249);
 91 |             }
 92 | 
 93 |             /* TILES */
 94 |             .tile {
 95 |               width: 100%;
 96 |               float: left;
 97 |               margin: 0px;
 98 |               list-style: none;
 99 |               font-size: 45px;
100 |               color: #FFF;
101 |               -moz-border-radius: 15px;
102 |               -webkit-border-radius: 15px;
103 |               margin-bottom: 5px;
104 |               position: relative;
105 |               text-align: center;
106 |               color: white!important;
107 |             }
108 | 
109 |             .tile.tile-fail {
110 |               background: #f44336!important;
111 |             }
112 |             .tile.tile-pass {
113 |               background: #4CAF50!important;
114 |             }
115 |             .tile.tile-info {
116 |               background: #009688!important;
117 |             }
118 |             .tile.tile-head {
119 |               background: #616161!important;
120 |             }
121 |             .dt-buttons {
122 |                 margin-left: 5px;
123 |             }
124 | 
125 |         </style>
126 |     </head>
127 |     <body>
128 |         <div class="container-fluid">
129 |             <div class="row">
130 |                 <nav class="col-md-2 d-none d-md-block bg-light sidebar" style="font-size:16px;">
131 |                     <div class="sidebar-sticky">
132 |                         <ul class="nav flex-column">
133 |                             <br/>
134 |                             <h6 class="sidebar-heading d-flex justify-content-between align-items-center text-muted">
135 |                                 <span>Dashboard</span>
136 |                                 <a class="d-flex align-items-center text-muted" href="#"></a>
137 |                             </h6>
138 |                             <li class="nav-item">
139 |                                 <a class="tablink nav-link" href="/" id="defaultOpen">
140 |                                     <i class="fa fa-dashboard"></i> Overview</a>
141 |                             </li>
142 |                             <li class="nav-item">
143 |                                 <a class="tablink nav-link" href="/failed">
144 |                                     <i class="fa fa-th-large"></i> Failed Tests</a>
145 |                             </li>
146 |                             <li class="nav-item">
147 |                                 <a class="tablink nav-link" href="/passed">
148 |                                     <i class="fa fa-th-large"></i> Passed Tests</a>
149 |                             </li>
150 |                         </ul>
151 |                     </div>
152 |                 </nav>
153 |             </div>
154 |         </div>
155 |     {% block body %}{% endblock %}
156 |     </body>
157 | </html>


--------------------------------------------------------------------------------
/RobotEyes/templates/failed.html:
--------------------------------------------------------------------------------
  1 | {% extends "base.html" %}
  2 | 
  3 | {% block body %}
  4 | <div class="tabcontent" id="suiteMetrics" style="position:relative;left:235px;width:80%">
  5 |     <div class="alert alert-success" role="alert" id="success" style="display:none;">
  6 |         Successfully moved all images
  7 |     </div>
  8 |     <div class="alert alert-danger" role="alert" id="failed" style="display:none;">
  9 |         Error
 10 |     </div>
 11 |     <h4><b><i class="fa fa-table"></i> Failed Tests</b></h4>
 12 |     <hr/>
 13 | 
 14 |     <p>
 15 |         <button class="btn btn-primary active inner" id="baseline">Baseline Selected Tests</button>
 16 |     </p>
 17 |     <table id="example" class="display" cellspacing="0" width="100%">
 18 |         <thead>
 19 |         <tr>
 20 |         <tr>
 21 |             <th><input type="checkbox" name="select_all" value="1" id="select-all"></th>
 22 |             <th>Test Case</th>
 23 |             <th>Status</th>
 24 |             <th>Images</th>
 25 |         </tr>
 26 |         </tr>
 27 |         </thead>
 28 |         <tbody>
 29 |         {% for test in failed %}
 30 |         <tr>
 31 |             <td><input type="checkbox" name="{{ test[1] }}" value="2"></td>
 32 |             <td>{{ test[0] }}</td>
 33 |             <td>Failed</td>
 34 |             <td><a href="/{{test[1]}}">View Images</a></td>
 35 |         </tr>
 36 |         {% endfor %}
 37 |         </tbody>
 38 |     </table>
 39 | </div>
 40 | <script>
 41 | $(document).ready(function() {
 42 |    var table = $('#example').DataTable({
 43 | 	"columnDefs": [ {
 44 | 	"targets": 0,
 45 | 	"orderable": false
 46 | 	} ],
 47 |       'order': [[1, 'asc']]
 48 |    });
 49 | 
 50 |   $('#select-all').on('click', function(){
 51 |       // Get all rows with search applied
 52 |       var rows = table.rows({ 'search': 'applied' }).nodes();
 53 |       // Check/uncheck checkboxes for all rows in the table
 54 |       $('input[type="checkbox"]', rows).prop('checked', this.checked);
 55 |   });
 56 | 
 57 |   $('#example tbody').on('change', 'input[type="checkbox"]', function(){
 58 |       // If checkbox is not checked
 59 |       if(!this.checked){
 60 |          var el = $('#select-all').get(0);
 61 |          // If "Select all" control is checked and has 'indeterminate' property
 62 |          if(el && el.checked && ('indeterminate' in el)){
 63 |             // Set visual state of "Select all" control
 64 |             // as 'indeterminate'
 65 |             el.indeterminate = true;
 66 |          }
 67 |       }
 68 |   });
 69 | 
 70 |   // Handle form submission event
 71 |   $('#baseline').on('click', function(e){
 72 |       var images = [];
 73 | 
 74 |       var form = this;
 75 | 
 76 |       // Iterate over all checkboxes in the table
 77 |       table.$('input[type="checkbox"]').each(function(){
 78 |          // If checkbox doesn't exist in DOM
 79 |          if($.contains(document, this)){
 80 |             // If checkbox is checked
 81 |             if(this.checked){
 82 |                // Create a hidden element
 83 |                images.push(this.name);
 84 |             }
 85 |          }
 86 |       });
 87 | 
 88 |       if (images.length > 0) {
 89 |         $.ajax({
 90 |           url: '/baseline_test',
 91 |           type: 'POST',
 92 |           contentType: "application/json",
 93 |           data: JSON.stringify({'tests' : images}),
 94 |           success: function(data) {
 95 |             $('#success').show();
 96 |           }
 97 |         });
 98 |       } else {
 99 |         $('#failed').text('Select image to baseline');
100 |         $('#failed').show();
101 |       }
102 |   });
103 | });
104 | </script>
105 | {% endblock %}


--------------------------------------------------------------------------------
/RobotEyes/templates/overview.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | 
 3 | {% block body %}
 4 | <div class="col-md-9 ml-sm-auto col-lg-10 px-4" role="main">
 5 |     <div class="tabcontent" id="dashboard">
 6 |         <div class="d-flex flex-column flex-md-row align-items-center p-1 mb-3 bg-light border-bottom shadow-sm">
 7 |             <h5 class="my-0 mr-md-auto font-weight-normal"><i class="fa fa-dashboard"></i> Dashboard</h5>
 8 |             <nav class="my-2 my-md-0 mr-md-3" style="color:red">
 9 |             </nav>
10 |         </div>
11 |         <div class="row">
12 |             <div class="col-md-4"><a class="tile tile-info">{{total}}<p style="font-size:14px">Total Tests</p></a></div>
13 |             <div class="col-md-4"><a class="tile tile-pass">{{passed}}<p style="font-size:14px">Passed Tests</p></a></div>
14 |             <div class="col-md-4"><a class="tile tile-fail">{{failed}}<p style="font-size:14px">Failed Tests</p></a></div>
15 |         </div>
16 |         <hr/>
17 |         <div class="row">
18 |             <div class="col-md-12" style="background-color:white;height:400px;width:auto;">
19 |                 <span style="font-weight:bold;font-size:24px">Test Status:</span>
20 |                 <div id="piechart" style="height:370px;width:auto;"></div>
21 |             </div>
22 |         </div>
23 | 
24 |         <div class="row">
25 |             <div class="col-md-12" style="height:25px;width:auto;">
26 |                 <p class="text-muted" style="text-align:center;font-size:9px">Robot Eyes</p>
27 |             </div>
28 |         </div>
29 |     </div>
30 | </div>
31 | <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
32 | <script type="text/javascript">
33 |     google.charts.load('current', {packages: ['corechart']});
34 |     google.charts.setOnLoadCallback(drawStuff);
35 | 
36 |     function drawStuff() {
37 |         var data = google.visualization.arrayToDataTable([['Status', 'Percentage'], ['PASS',parseInt({{passed}})],['FAIL',parseInt({{failed}})]]);
38 | 
39 |         var options = {
40 |             pieHole: 0.6,
41 |             legend: 'none',
42 |             chartArea: {width: "95%",height: "90%"},
43 |             colors: ['green', 'red'],
44 |         };
45 | 
46 |         var chart = new google.visualization.PieChart(document.getElementById("piechart"));
47 |         chart.draw(data, options);
48 |     }
49 | </script>
50 | {% endblock %}


--------------------------------------------------------------------------------
/RobotEyes/templates/passed.html:
--------------------------------------------------------------------------------
  1 | {% extends "base.html" %}
  2 | 
  3 | {% block body %}
  4 | <div class="tabcontent" id="suiteMetrics" style="position:relative;left:235px;width:80%">
  5 |     <div class="alert alert-success" role="alert" id="success" style="display:none;">
  6 |         Successfully moved all images
  7 |     </div>
  8 |     <div class="alert alert-danger" role="alert" id="failed" style="display:none;">
  9 |         Error
 10 |     </div>
 11 |     <h4><b><i class="fa fa-table"></i> Passed Tests</b></h4>
 12 |     <hr/>
 13 | 
 14 |     <p>
 15 |         <button class="btn btn-primary active inner" id="baseline">Baseline Selected Tests</button>
 16 |     </p>
 17 |     <table id="example" class="display" cellspacing="0" width="100%">
 18 |         <thead>
 19 |         <tr>
 20 |         <tr>
 21 |             <th><input type="checkbox" name="select_all" value="1" id="select-all"></th>
 22 |             <th>Test Case</th>
 23 |             <th>Status</th>
 24 |             <th>Images</th>
 25 |         </tr>
 26 |         </tr>
 27 |         </thead>
 28 |         <tbody>
 29 |         {% for k, v in passed.items() %}
 30 |         <tr>
 31 |             <td><input type="checkbox" name="{{ v }}" value="2"></td>
 32 |             <td>{{ k }}</td>
 33 |             <td>Passed</td>
 34 |             <td><a href="/{{ v }}">View Images</a></td>
 35 |         </tr>
 36 |         {% endfor %}
 37 |         </tbody>
 38 |     </table>
 39 | </div>
 40 | <script>
 41 | $(document).ready(function() {
 42 |    var table = $('#example').DataTable({
 43 | 	"columnDefs": [ {
 44 | 	"targets": 0,
 45 | 	"orderable": false
 46 | 	} ],
 47 |       'order': [[1, 'asc']]
 48 |    });
 49 | 
 50 |   $('#select-all').on('click', function(){
 51 |       // Get all rows with search applied
 52 |       var rows = table.rows({ 'search': 'applied' }).nodes();
 53 |       // Check/uncheck checkboxes for all rows in the table
 54 |       $('input[type="checkbox"]', rows).prop('checked', this.checked);
 55 |   });
 56 | 
 57 |   $('#example tbody').on('change', 'input[type="checkbox"]', function(){
 58 |       // If checkbox is not checked
 59 |       if(!this.checked){
 60 |          var el = $('#select-all').get(0);
 61 |          // If "Select all" control is checked and has 'indeterminate' property
 62 |          if(el && el.checked && ('indeterminate' in el)){
 63 |             // Set visual state of "Select all" control
 64 |             // as 'indeterminate'
 65 |             el.indeterminate = true;
 66 |          }
 67 |       }
 68 |   });
 69 | 
 70 |   // Handle form submission event
 71 |   $('#baseline').on('click', function(e){
 72 |       var images = [];
 73 | 
 74 |       var form = this;
 75 | 
 76 |       // Iterate over all checkboxes in the table
 77 |       table.$('input[type="checkbox"]').each(function(){
 78 |          // If checkbox doesn't exist in DOM
 79 |          if($.contains(document, this)){
 80 |             // If checkbox is checked
 81 |             if(this.checked){
 82 |                // Create a hidden element
 83 |                images.push(this.name);
 84 |             }
 85 |          }
 86 |       });
 87 | 
 88 |       if (images.length > 0) {
 89 |         $.ajax({
 90 |           url: '/baseline_test',
 91 |           type: 'POST',
 92 |           contentType: "application/json",
 93 |           data: JSON.stringify({'tests' : images}),
 94 |           success: function(data) {
 95 |             $('#success').show();
 96 |           }
 97 |         });
 98 |       } else {
 99 |         $('#failed').text('Select image to baseline');
100 |         $('#failed').show();
101 |       }
102 |   });
103 | });
104 | </script>
105 | {% endblock %}


--------------------------------------------------------------------------------
/RobotEyes/templates/report.html:
--------------------------------------------------------------------------------
  1 | {% extends "base.html" %}
  2 | 
  3 | {% block body %}
  4 | <a href="/" class="btn btn-outline-secondary" style="position:absolute;left:80px;top:10px;">Home</a>
  5 | 
  6 | <div class="container" style="position:relative;top:100px;">
  7 |     {% with messages = get_flashed_messages() %}
  8 |     {% if messages %}
  9 |     <div class="alert alert-success" role="alert">
 10 |         <ul>
 11 |             {% for message in messages %}
 12 |             <li>{{ message }}</li>
 13 |             {% endfor %}
 14 |         </ul>
 15 |     </div>
 16 |     {% endif %}
 17 |     {% endwith %}
 18 |     <div>
 19 |         <form action="/baseline" method="POST">
 20 |             <button type="submit" class="btn btn-link">Make all images baseline</button>
 21 |         </form>
 22 |     </div>
 23 |     <table class="table table-striped table-sm" id="results">
 24 |         <thead>
 25 |         <tr>
 26 |             <th></th>
 27 |             <th>Test Name</th>
 28 |         </tr>
 29 |         </thead>
 30 |         <tbody>
 31 |             {% for test, value in data.items() %}
 32 |             <tr data-toggle="collapse" data-target='div[value={{value[0][4]}}]' class="accordion-toggle">
 33 |                 <td>
 34 |                     <button class="btn btn-default btn-sm"><i class="fas fa-arrow-right"></i></button>
 35 |                 </td>
 36 |                 <td>{{test}}</td>
 37 |             </tr>
 38 |             <tr>
 39 |                 <td colspan="12" class="hiddenRow">
 40 |                     <div class="accordian-body collapse" value="{{value[0][4]}}">
 41 |                         <table class="table table-bordered table-hover" id="innerResults">
 42 |                             <thead>
 43 |                                 <tr>
 44 |                                     <th style="text-align:center;vertical-align:middle">Baseline</th>
 45 |                                     <th style="text-align:center;vertical-align:middle">Actual</th>
 46 |                                     <th style="text-align:center;vertical-align:middle">Diff</th>
 47 |                                     <th>Diff value<br><font size="2">(Exp : Actual)</font></th>
 48 |                                 </tr>
 49 |                             </thead>
 50 |                             <tbody>
 51 |                                 {% for row in value %}
 52 |                                 <tr>
 53 |                                     <td><a href={{row[0]}} target="_blank"><img src="{{row[0]}}" height="200" width="350"></a></td>
 54 |                                     <td><a href={{row[1]}} target="_blank"><img src="{{row[1]}}" height="200" width="350"></a></td>
 55 |                                     <td><a href={{row[2]}} target="_blank"><img src="{{row[2]}}" height="200" width="350"></a></td>
 56 |                                     <td style="color:{{row[3][1]}}">{{row[3][0]}}</td>
 57 |                                 </tr>
 58 |                                 {% endfor %}
 59 |                             </tbody>
 60 |                         </table>
 61 |                     </div>
 62 |                 </td>
 63 |             </tr>
 64 |             {% endfor %}
 65 |         </tbody>
 66 |     </table>
 67 | </div>
 68 | <style>
 69 |   tr.accordion-toggle:hover {
 70 |     cursor:pointer;
 71 |   }
 72 | </style>
 73 | <script>
 74 |     $(document).ready(function() {
 75 |       var pass = 0;
 76 |       var fail = 0;
 77 |       var t = 1;
 78 |       $("table#innerResults").each(function() {
 79 |         var $items = $(this).find('tbody tr');
 80 |         $.each($items, function(n, e) {
 81 |           color = $(e).find('td:last').css('color');
 82 |           if (color == 'rgb(255, 0, 0)') {
 83 |             return false;
 84 |           }
 85 |         });
 86 |         if(color == 'rgb(255, 0, 0)') {
 87 |           $('table#results > tbody > tr:nth-child(' + t + ') > td:nth-child(2)').css('color','red');
 88 |           t = t+2;
 89 |           fail = fail + 1;
 90 |         }
 91 |         else  {
 92 |          $('table#results > tbody > tr:nth-child(' + t + ') > td:nth-child(2)').css('color','green');
 93 |          t = t+2;
 94 |          pass = pass + 1;
 95 |         }
 96 |       });
 97 | 
 98 |       $("tr.accordion-toggle").click(function () {
 99 |         classes = {
100 |             "fa-arrow-down": "fa-arrow-right",
101 |             "fa-arrow-right": "fa-arrow-down"
102 |         }
103 |         cls = $(this).find('i:first').attr("class").split(" ")[1];
104 |         $(this).find('i:first').removeClass(cls).addClass(classes[cls]);
105 |       });
106 | 
107 |     });
108 | </script>
109 | {% endblock %}
110 | 


--------------------------------------------------------------------------------
/RobotEyes/templates/test.html:
--------------------------------------------------------------------------------
  1 | {% extends "base.html" %}
  2 | 
  3 | 
  4 | {% block body %}
  5 | {% for key, value in data.items() %}
  6 | <div class="tabcontent" id="test" style="position:relative;left:235px;width:80%">
  7 |     <div class="alert alert-success" role="alert" id="success" style="display:none;">
  8 |         Success
  9 |     </div>
 10 |     <div class="alert alert-danger" role="alert" id="failed" style="display:none;">
 11 |         Error
 12 |     </div>
 13 |     <h4><b><i class="fa fa-table"></i> {{ key }}</b></h4>
 14 |     <hr/>
 15 |     <p>
 16 |         <button id="baseline" class="btn btn-primary active inner">Baseline Selected Images</button>
 17 |     </p>
 18 |     <table id="example" class="display" cellspacing="0" width="100%">
 19 |         <thead>
 20 |         <tr>
 21 |         <tr>
 22 |             <th><input type="checkbox" name="select_all" value="1" id="select-all"></th>
 23 |             <th>Baseline</th>
 24 |             <th>Actual</th>
 25 |             <th>Diff</th>
 26 |             <th>Value</th>
 27 |         </tr>
 28 |         </tr>
 29 |         </thead>
 30 |         <tbody>
 31 |         {% for test in value %}
 32 |         <tr>
 33 |             <td><input type="checkbox" name="{{ test[1] }}" value="2"></td>
 34 |             <td>
 35 |                 <a href="{{ test[0] }}" target="_blank">
 36 |                     <img src="{{ test[0] }}" height="200" width="300">
 37 |                 </a>
 38 |             </td>
 39 |             <td>
 40 |                 <a href="{{ test[1] }}" target="_blank">
 41 |                     <img src="{{ test[1] }}" height="200" width="300">
 42 |                 </a>
 43 |             </td>
 44 |             <td>
 45 |                 <a href="{{ test[2] }}" target="_blank">
 46 |                     <img src="{{ test[2] }}" height="200" width="300">
 47 |                 </a>
 48 |             </td>
 49 |             <td style="color:{{ test[3] }}">{{ test[4] }}</td>
 50 |         </tr>
 51 |         {% endfor %}
 52 |         </tbody>
 53 |     </table>
 54 | 
 55 | </div>
 56 | {% endfor %}
 57 | <script>
 58 | $(document).ready(function() {
 59 |    var table = $('#example').DataTable({
 60 | 	"columnDefs": [ {
 61 | 	"targets": 0,
 62 | 	"orderable": false
 63 | 	} ],
 64 |       'order': [[1, 'asc']]
 65 |    });
 66 | 
 67 |     $('#select-all').on('click', function(){
 68 |       // Get all rows with search applied
 69 |       var rows = table.rows({ 'search': 'applied' }).nodes();
 70 |       // Check/uncheck checkboxes for all rows in the table
 71 |       $('input[type="checkbox"]', rows).prop('checked', this.checked);
 72 |     });
 73 | 
 74 |     $('#example tbody').on('change', 'input[type="checkbox"]', function(){
 75 |       // If checkbox is not checked
 76 |       if(!this.checked){
 77 |          var el = $('#select-all').get(0);
 78 |          // If "Select all" control is checked and has 'indeterminate' property
 79 |          if(el && el.checked && ('indeterminate' in el)){
 80 |             // Set visual state of "Select all" control
 81 |             // as 'indeterminate'
 82 |             el.indeterminate = true;
 83 |          }
 84 |       }
 85 |     });
 86 | 
 87 |    // Handle form submission event
 88 |    $('#baseline').on('click', function(e){
 89 |       var images = [];
 90 | 
 91 |       var form = this;
 92 | 
 93 |       // Iterate over all checkboxes in the table
 94 |       table.$('input[type="checkbox"]').each(function(){
 95 |          // If checkbox doesn't exist in DOM
 96 |          if($.contains(document, this)){
 97 |             // If checkbox is checked
 98 |             if(this.checked){
 99 |                // Create a hidden element
100 |                images.push(this.name);
101 |             }
102 |          }
103 |       });
104 | 
105 |       if (images.length > 0) {
106 |         $.ajax({
107 |           url: '/baseline_images',
108 |           type: 'POST',
109 |           contentType: "application/json",
110 |           data: JSON.stringify({'images' : images}),
111 |           success: function(data) {
112 |             $('#success').show();
113 |           }
114 |         });
115 |       } else {
116 |         $('#failed').text('Select image to baseline');
117 |         $('#failed').show();
118 |       }
119 |    });
120 | });
121 | </script>
122 | {% endblock %}
123 | 


--------------------------------------------------------------------------------
/RobotEyes/web.py:
--------------------------------------------------------------------------------
  1 | from flask import Flask, render_template, flash, redirect, url_for, request, jsonify
  2 | from gevent import pywsgi
  3 | import shutil
  4 | import os
  5 | 
  6 | app = Flask(__name__, static_url_path="", static_folder=os.getcwd(), template_folder='templates')
  7 | 
  8 | app.debug = True
  9 | 
 10 | app.secret_key = 'somerandomkey'
 11 | 
 12 | 
 13 | @app.route("/")
 14 | def overview():
 15 |     actual_path = os.path.join(results, 'visual_images', 'actual')
 16 |     passed = 0
 17 |     failed = 0
 18 | 
 19 |     if os.path.exists(actual_path):
 20 |         for directory in os.listdir(os.path.join(actual_path)):
 21 |             abs_directory = os.path.join(actual_path, directory)
 22 | 
 23 |             if os.path.isdir(abs_directory):
 24 |                 last_found = ''  # incase we are inside an empty directory
 25 |                 for file in os.listdir(abs_directory):
 26 |                     if file.endswith('.txt'):
 27 |                         f = os.path.join(abs_directory, file)
 28 |                         obj = open(f, 'r')
 29 |                         first_line = obj.readline().strip()
 30 |                         arr = first_line.split()
 31 |                         obj.close()
 32 |                         color = arr[1]
 33 | 
 34 |                         if color == 'red':
 35 |                             failed += 1
 36 |                             break
 37 | 
 38 |                         elif color == 'green':
 39 |                             last_found = 'green'
 40 |                 else:
 41 |                     if last_found == 'green':
 42 |                         passed += 1
 43 | 
 44 |     return render_template('overview.html', passed=passed, failed=failed, total=(passed+failed))
 45 | 
 46 | 
 47 | @app.route("/passed")
 48 | def passed():
 49 |     data = {}
 50 | 
 51 |     actual_path = os.path.join(results, 'visual_images', 'actual')
 52 | 
 53 |     if os.path.exists(actual_path):
 54 |         for directory in os.listdir(os.path.join(actual_path)):
 55 |             test_name = directory.replace('_', ' ')
 56 | 
 57 |             abs_directory = os.path.join(actual_path, directory)
 58 | 
 59 |             if os.path.isdir(abs_directory):
 60 |                 for file in os.listdir(abs_directory):
 61 |                     if file.endswith('.txt'):
 62 |                         f = os.path.join(abs_directory, file)
 63 | 
 64 |                         obj = open(f, 'r')
 65 |                         first_line = obj.readline().strip()
 66 |                         arr = first_line.split()
 67 |                         obj.close()
 68 |                         color = arr[1]
 69 | 
 70 |                         if color == 'red':
 71 |                             break
 72 |                 else:
 73 |                     data[test_name] = directory
 74 | 
 75 |     return render_template('passed.html', passed=data)
 76 | 
 77 | 
 78 | @app.route("/failed")
 79 | def failed():
 80 |     data = []
 81 | 
 82 |     actual_path = os.path.join(results, 'visual_images', 'actual')
 83 | 
 84 |     if os.path.exists(actual_path):
 85 |         for directory in os.listdir(os.path.join(actual_path)):
 86 |             test_name = directory.replace('_', ' ')
 87 | 
 88 |             abs_directory = os.path.join(actual_path, directory)
 89 | 
 90 |             if os.path.isdir(abs_directory):
 91 | 
 92 |                 for file in os.listdir(abs_directory):
 93 | 
 94 |                     if file.endswith('.txt'):
 95 |                         f = os.path.join(abs_directory, file)
 96 | 
 97 |                         obj = open(f, 'r')
 98 |                         first_line = obj.readline().strip()
 99 |                         arr = first_line.split()
100 |                         obj.close()
101 |                         color = arr[1]
102 | 
103 |                         if color == 'red':
104 |                             data.append([test_name, directory])
105 |                             break
106 | 
107 |     return render_template('failed.html', failed=data)
108 | 
109 | @app.route('/<test>')
110 | def images(test):
111 |     test_name = test.replace('_', ' ')
112 |     output = {test_name: []}
113 | 
114 |     baseline_directory = os.path.join(baseline, test)
115 |     actual_directory = os.path.join(results, 'visual_images', 'actual', test)
116 |     diff_directory = os.path.join(results, 'visual_images', 'diff', test)
117 | 
118 |     if os.path.isdir(actual_directory):
119 |         for file in os.listdir(actual_directory):
120 |             if file.endswith('.png'):
121 |                 images = []
122 |                 images.append(os.path.join(baseline_directory, file))
123 |                 images.append(os.path.join(actual_directory, file))
124 |                 images.append(os.path.join(diff_directory, file))
125 | 
126 |                 file = file + '.txt'
127 |                 f = os.path.join(actual_directory, file)
128 | 
129 |                 if os.path.exists(f):
130 |                     obj = open(f, 'r')
131 |                     first_line = obj.readline().strip()
132 |                     arr = first_line.split()
133 |                     obj.close()
134 |                     color = arr[1]
135 |                     value = arr[0]
136 |                     images.append(color)
137 |                     images.append(value)
138 |                     output[test_name].append(images)
139 |     return render_template('test.html', data=output)
140 | 
141 | @app.route("/all")
142 | def report():
143 |     baseline_path = baseline
144 |     actual_path = os.path.join(results, 'visual_images', 'actual')
145 |     diff_path = os.path.join(results, 'visual_images', 'diff')
146 | 
147 |     data = {}
148 |     if os.path.exists(actual_path):
149 |         for directory in os.listdir(os.path.join(actual_path)):
150 |             abs_directory = os.path.join(actual_path, directory)
151 | 
152 |             if os.path.isdir(abs_directory):
153 |                 test_name = directory.replace('_', ' ')
154 |                 data[test_name] = []
155 | 
156 |                 for file in os.listdir(abs_directory):
157 |                     if file.endswith('.png'):
158 |                         row = []
159 | 
160 |                         b_img = os.path.join(baseline_path, directory, file)
161 | 
162 |                         row.append(b_img)
163 |                         row.append(os.path.join(abs_directory, file))
164 |                         row.append(os.path.join(diff_path, directory, file))
165 | 
166 |                         txt_file_name = file + '.txt'
167 |                         txt_file_path = os.path.join(abs_directory, txt_file_name)
168 | 
169 |                         if os.path.exists(txt_file_path):
170 |                             obj = open(txt_file_path, 'r')
171 |                             first_line = obj.readline().strip()
172 |                             arr = first_line.split()
173 |                             obj.close()
174 |                             row.append(arr)
175 | 
176 |                         row.append(directory)
177 |                         data[test_name].append(row)
178 |     return render_template('report.html', data=data)
179 | 
180 | 
181 | @app.route("/baseline_test", methods=['POST'])
182 | def make_all_baseline():
183 |     tests = request.json['tests']
184 | 
185 |     baseline_path = baseline
186 |     actual_path = os.path.join(results, 'visual_images', 'actual')
187 | 
188 |     for test in tests:
189 |         baseline_test = os.path.join(baseline_path, test)
190 |         actual_test = os.path.join(actual_path, test)
191 | 
192 |         if os.path.exists(baseline_test):
193 |             shutil.rmtree(baseline_test)
194 | 
195 |         shutil.copytree(actual_test, baseline_test)
196 | 
197 |     resp = {"success": True}
198 |     return jsonify(resp)
199 | 
200 | 
201 | @app.route("/baseline_images", methods=['POST'])
202 | def baseline_images():
203 |     imges = request.json['images']
204 | 
205 |     for img in imges:
206 |         actual_path = os.path.join(results, img)
207 |         baseline_path = actual_path.replace(
208 |             os.path.sep + 'actual' + os.path.sep, os.path.sep + 'baseline' + os.path.sep)
209 | 
210 |         if os.path.exists(actual_path):
211 |             if os.path.exists(baseline_path):
212 |                 os.remove(baseline_path)
213 |             shutil.copyfile(actual_path, baseline_path)
214 | 
215 |     resp = {'success': True}
216 |     return jsonify(resp)
217 | 
218 | 
219 | @app.after_request
220 | def add_header(r):
221 |     """
222 |     Add headers to both force latest IE rendering engine or Chrome Frame,
223 |     and also to cache the rendered page for 0 minutes.
224 |     """
225 |     r.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
226 |     r.headers["Pragma"] = "no-cache"
227 |     r.headers["Expires"] = "0"
228 |     r.headers['Cache-Control'] = 'public, max-age=0'
229 |     return r
230 | 
231 | 
232 | def start(base, res, host, port):
233 |     global results
234 |     global baseline
235 |     results = res
236 |     baseline = base
237 |     app.logger.info('Starting server on %s:%s' % (host, port))
238 | 
239 |     try:
240 |         pywsgi.WSGIServer((host, int(port)),
241 |                       app).serve_forever()
242 |     except KeyboardInterrupt:
243 |         print('Exiting...')
244 | 


--------------------------------------------------------------------------------
/basicreport.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jessezach/RobotEyes/f35fc6874b83ad4770ab4df18d60baa711a8b18f/basicreport.png


--------------------------------------------------------------------------------
/images.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jessezach/RobotEyes/f35fc6874b83ad4770ab4df18d60baa711a8b18f/images.png


--------------------------------------------------------------------------------
/overview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jessezach/RobotEyes/f35fc6874b83ad4770ab4df18d60baa711a8b18f/overview.png


--------------------------------------------------------------------------------
/setup.py:
--------------------------------------------------------------------------------
 1 | from setuptools import setup, find_packages
 2 | import os
 3 | 
 4 | version = '1.6.2'
 5 | 
 6 | setup(name='robotframework-eyes',
 7 |       version=version,
 8 |       description="Visual regression library and report generator for robot framework",
 9 |       long_description="""\
10 | Visual regression library and report generator for robot framework. Capture elements, fullscreens and compare them against baseline images. Extends Selenium2Libary. Visit https://github.com/jz-jess/RobotEyes for documentation.""",
11 |       classifiers=[
12 |         'Framework :: Robot Framework',
13 |         'Programming Language :: Python',
14 |         'Topic :: Software Development :: Testing',
15 |       ],
16 |       keywords='visual-regression image-comparison robotframework robot-eyes',
17 |       author='Jesse Zacharias',
18 |       author_email='iamjess988@gmail.com',
19 |       url='https://github.com/jz-jess/RobotEyes',
20 |       license='MIT',
21 |       packages=find_packages(),
22 |       include_package_data=True,
23 |       zip_safe=False,
24 |       install_requires=[
25 |           'pillow',
26 |           'robotframework',
27 |           'flask'
28 |       ],
29 |       entry_points={
30 |           'console_scripts': [
31 |               'eyes = RobotEyes.runner:main',
32 |               'reportgen = RobotEyes.reportgen:report_gen'
33 |           ]
34 |       },
35 | )
36 | 


--------------------------------------------------------------------------------
/tests.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jessezach/RobotEyes/f35fc6874b83ad4770ab4df18d60baa711a8b18f/tests.png


--------------------------------------------------------------------------------