Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Visual testing guide #1536

Merged
merged 16 commits into from May 15, 2019
Merged

Visual testing guide #1536

merged 16 commits into from May 15, 2019

Conversation

@bahmutov
Copy link
Collaborator

@bahmutov bahmutov commented Apr 1, 2019

  • closes #1535
  • it would be nice to include a visual diff image for the ".completed" style change that catches the visual regression
@bahmutov
Copy link
Collaborator Author

@bahmutov bahmutov commented May 13, 2019

@jennifer-shehane I have added Applitools links, so now it would be nice to get this page merged

@bahmutov bahmutov changed the title WIP: visual testing guide Visual testing guide May 13, 2019
@bahmutov
Copy link
Collaborator Author

@bahmutov bahmutov commented May 13, 2019

@mapsandapps could you give a quick look to this visual testing guide, please? Since you have used it with the services, it would be nice to see if I missed something that developers should know here

Copy link
Member

@jennifer-shehane jennifer-shehane left a comment

This is a really nice guide. I made some changes, mostly in how to visually show the content so that it's a bit easier to scan. Plus the usual editing.

Need to update links.yml to include visual-testing in on.cypress.io before this can go out cypress-io/cypress-services#652


Luckily, Cypress gives a stable platform for writing plugins that _can perform visual testing_. Typically such plugins take an image snapshot of the entire application or a specific element, and then compare the image to a previously approved baseline image. If the images are the same (within pixel tolerance), the web application looks the same to the user. If there are differences, then there is some change in the DOM layout, fonts, colors or other visual properties that needs to be investigated.

For example one can use {% url 'cypress-plugin-snapshots' https://github.com/meinaart/cypress-plugin-snapshots %} plugin and catch the following visual regression:
Copy link
Member

@jennifer-shehane jennifer-shehane May 14, 2019

I know the majority of this page is based on outside plugin code...so it seems necessary, but I cringe a bit writing code in our docs that is dependent on the API of a plugin outside of our control.

Copy link
Collaborator Author

@bahmutov bahmutov May 14, 2019

absolutely, but think of this page as take-off point for jumping into 3rd party services

Copy link
Collaborator Author

@bahmutov bahmutov May 14, 2019

why is THIS pull request blocked by cypress-io/cypress-services#652 ? isn't the on redirect a nice to have, but independent feature?

Copy link
Member

@jennifer-shehane jennifer-shehane May 15, 2019

hmm, I don't know. I just expect the redirects to work before releasing. Having on.cypress.io in the monorepo I think is a bit of a mistake due to it's release cycle though.

source/guides/tooling/visual-testing.md Outdated Show resolved Hide resolved
- Add ‘note’ blocks
- Update header levels
- Add tables for tools instead of lists
- Add content about how to test css functionally
- Add ‘best practices’ notes
- Add more ‘see also’ links
@bahmutov
Copy link
Collaborator Author

@bahmutov bahmutov commented May 14, 2019

do you think we need more editing here or this is good as v1.0 of the guide @jennifer-shehane ?

@mapsandapps
Copy link
Contributor

@mapsandapps mapsandapps commented May 14, 2019

Looks super useful to me. I also found the Applitools and Percy official Cypress integration tutorials to be useful:

@bahmutov bahmutov merged commit c6412ed into develop May 15, 2019
3 checks passed
@matthamil matthamil deleted the visual-testing-guide-1535 branch Apr 14, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

3 participants