Here lie my Cypress solutions for UI Test Automation Playground. Of course, it should be Component Testing, not E2E. But since the code is located on servers UITAP we can't build components separately.
And querying elements here is not the best practice, because I can't add attributes to elements like data-cy, data-test, etc. here.
Feel free to constructive criticism, I'm learning and don't know how it is made in a real working process. Help me to understand this =)
ajaxData.cy.js
The element appears on a page after processing an AJAX request to a web server.
Test waits for AJAX request to process, then clicks on label text.
classAtribute.cy.js
The class attribute of the element contains more than one class reference.
The test identifies the primary (blue) button using btn-primary class and clicks on it.
click.cy.js
The event-based click does not work.
Test emulates physical mouse click.
clientSideDelay.cy.js
The element appears on a page after JS processing on the client side.
The test waits for the element to show up.
dynamicID.cy.js
In the case of generated dynamic ID for elements in an application, it is not reliable to use such ID in the element selector. That creates flaky tests.
Task: to skip dynamic IDs when XPath (CSS selectors in Cypress) is generated for an element.
Test clicks on button with dynamic ID.
dynamicTable.cy.js
Columns and rows change their position upon page reload creating Dynamic Table.
The test should get a value of CPU load for the Chrome process and compare it with the value on the label.
hiddenLayers.cy.js
The button is present in the DOM tree but overlapped with another element.
Test duplicates the button click, the green button doesn't hit twice.
loadDelay.cy.js
The page has a load delay.
The test waits for a page to load.
mouseOver.cy.js
Mouse over an element replaces it in the DOM tree.
Test clicks on active link 2 times and checks the number of clicks on label.
nonBreakingSpace.cy.js
Non-breaking space has no visual difference on the screen. It may lead to confusion when building XPath
But there's no such problem in Cypress.
Test searches for an element by its text with non-breaking space.
overlappedElement.cy.js
Entering text into the element requires scrolling it into view.
Test scrolls to the input 'name' and enters text in it.
progressBar.cy.js
The result should be equal to 0.
Test clicks the Start button, waits for the progress bar to reach 75%, then clicks Stop.
The test is flaky in case of progress bar speed is higher than the execution of Cypress commands.
sampleApp.cy.js
Standard login form.
Test logs in and checks that the status contains the proper text.
scrollbars.cy.js
The button element is out of view.
Test scrolls the button into a visible area and clicks it.
shadowDOM.cy.js
The page contains a Shadow DOM component guid-generator.
The test compares the value from the clipboard with the value of the input field.
BUT it works only after the test reload: the document loses focus. There is a solution to this using cy.realClick(), but it is still not a proper fix and the root cause of the problem needs to be addressed by the Cypress itself.
IMPORTANT: I used HTTPS instead of original HTTP here because navigator.clipboard requires a secure origin.
textInput.cy.js
The entered text should emulate sending DOM events to the button element.
Test types text in input and checks that it changes the button name.
verifyText.cy.js
Test finds the label element with Welcome text.
visibility.cy.js
Buttons on the page are removed | have zero height or width | covered by another element |
hidden using styles | moved offscreen.
Test clicks the Hide button and determines that other buttons are invisible.
I've decided to determine if other buttons visible by making assertions of their invisibility.
And there are multiple solutions for some cases, I did it for educational purposes to learn different approaches to elements.