https://cypress.io logo
Automated test creation
# general-chat
c
Is it possible to automatically create structure validations for a website? Example: I must remove certain libraries, which requires refactoring code that generates html, but this change must be transparent to the "browser" delivering the same structure and information. This way you could make changes and run tests, being sure that the site is maintained as it was.
e
If you are referring to the visual structure of the site you could use something like
cypress-image-snapshot
to do a before/after test to make sure they were the same. https://www.npmjs.com/package/cypress-image-snapshot
c
Thanks, maybe it will work for me in another instance, but right now it's not exactly what I want. I don't want to just compare images pixel by pixel. Example: I want to check this "cy.get('section').get('.thumb-list.products li.col-lg-3').should('have.length', 24)" but to define it is necessary count previously in the original site(24) to later verify if the new development has an original amount, or if they are in the same hierarchy ... ... The interesting thing is that in order to check that amount, you have to count the child elements. I understand that automatically the rules for counting elements could be infinite N*n-1*n-1 Is there such automation in Cypress DOM structure to rules? (The dom has 7 elements, the first has 4 children and each of those... has 5 elements...)
e
Per your example if you write a test checking for the length for that element, and it later changes that test will fail. I feel like I might just not be fully understanding what is needed here, and probably won't be much help.
w
Tell me if I follow correctly: - You’d like to capture the entire DOM tree of a page (or multiple pages) with Cypress - you are going to refactor and clean up dependencies in the project - you want to confirm that after your changes, all the exact same HTML as before is rendering. There is not an automatic way to generate this in Cypress, but it seems like it would be possible to do something grab the innerHTML parts of the page you are interested in doing this for, store those strings as fixtures, and assert that the new site has the same exact innerHTML or whatever. This would be a very crude, manual form of snapshot test. And I wouldn’t normally recommend this at all, but it seems to be exactly what you are asking for? It sounds like you want that broad regression test for this one moment in time. Ideally you wouldn’t need this and your existing e2e or component tests would cover enough that you have confidence before and after a refactor. You might be able to make it more automatic with something like https://www.npmjs.com/package/cypress-plugin-snapshots But idk. If you have time, true end to end tests will last you long into the future and may worth the investment.
c
Exactly this!
The two answers above capture the problem to be solved, but the requirement is the following: Write the tests based on an analysis of the DOM structure of a site (counting the main elements of the body and how many children each one has, thus generating the rules) Having several similar sites, but with slight differences in DOM structure and dynamic content. I'm not asking for an "automagical" solution but for an idea of how to implement Cypress to generate DOM structure tests and then use them in the future.
6 Views