Testing best practices with cloudscape wrappers

[tomvonheill]

Using cypress fro testing my front end functionality right now and i'm wondering about best practices. I've been using the cloudscape wrappers and the element wrapper chaining has been super useful especially with more complicated components like the dateRange picker, but coworkers are saying the cypress logs have been less than useful for them because of the complicated nature of the selectors.

An example below of how I am using it.

            //pick a new invalid date and make sure error appears
            const dateRangePicker = createWrapper().findDateRangePicker('[data-cy="date-range-picker"]')

            cy.get(dateRangePicker.toSelector()).click()
            cy.get(dateRangePicker.findDropdown().findStartDateInput().toSelector())
                .click()
                .type('2023/01/01')
            cy.get(dateRangePicker.findDropdown().findEndDateInput().toSelector())
                .click()
                .type('2022/01/01')
            cy.get(
                dateRangePicker.findDropdown().findApplyButton().toSelector()
            ).click()
            cy.get(
                dateRangePicker.findDropdown().findValidationError().toSelector()
            ).should('be.visible')
            cy.get(
                dateRangePicker.findDropdown().findCancelButton().toSelector()
            ).click()

I'm thinking one way I can improve this workflow may be adding a query command that automatically appends the .toSelector() call, I'm open to hear about any suggestions/best practices/ examples anyone else is doing!

[just-boris]

End-to-end tests is a reflection of what a real user would do to perform the same operations. Your test snippet seem to follow this approach pretty well.

Not sure what we can improve on our end. Automatic .toSelector() insertion may sound nice in theory, but as any "magic" behavior is it prone to bugs which are super difficult to investigate. Explicit call is a safer bet and also allows for strict typings

[just-boris]

P.S. if you find yourself repeating the same snippet in many tests, maybe you could create setDateRangePickerValue(from, to), which wraps this code for reuse