I have this code that selects the child element of a parent element:
cy.get('form[data-cy="user_add"]').find('[name="username"]').type('test');
This is working fine as is, but this becomes an issue when I need to constantly select the parent element in order to find the child that I want to type in/modify.
cy.get('form[data-cy="manage_users_addform"]').find('[name="username"]').type('testusername');cy.get('form[data-cy="manage_users_addform"]').find('[name="password"]').type('testpassword');cy.get('form[data-cy="manage_users_addform"]').find('[name="repeatpassword"]').type('testpassword');cy.get('form[data-cy="manage_users_addform"]').find('[name="firstname"]').type('testfname');cy.get('form[data-cy="manage_users_addform"]').find('[name="lastname"]').type('testlname');cy.get('form[data-cy="manage_users_addform"]').find('[name="per_station"]').click();cy.get('form[data-cy="manage_users_addform"]').find('[name="per_cashier"]').click();cy.get('form[data-cy="manage_users_addform"]').find('[name="per_manage"]').click();
Any suggestions on how to not constantly repeat the selection of the form? Cypress documentation says to not use variables as much as possible due to the async by default nature of it. I also found some documentation on escaping from this async nature and just doing JavaScript code before wrapping it up and doing the assertion after, but I was just wondering if there is a more elegant way of doing this.