Add CSS selectors to Cognito Managed Login Branding
We recently moved our Cognito login experience to the new Managed Login Branding. Our QA team is requesting some CSS selector elements to the login screen(s). The existing ones seem to be auto-generated and could possibly change at any time.
Is it possible to add something like data-email selectors to specific fields in the login screen(s)? If not, how are others testing their systems when they have to login via Cognito?
- Tags
- Amazon Cognito
- Language
- English
asked a year ago376 views
- Newest
- Most votes
- Most comments
It is not currently possible to add custom attributes like data-email selectors directly to specific fields in the Amazon Cognito Managed Login Branding pages. The Managed Login Branding editor allows you to customize the visual style such as colors, fonts, logos, and some component styles but it does not support adding custom HTML attributes or stable CSS selectors to individual input fields.
Because the CSS selectors in the managed login UI are often auto-generated and subject to change, this can make automated testing challenging. To handle this, many teams use one or more of the following approaches:
-
Use more general or stable CSS selectors provided by the branding editor, or target elements by their relative position or text content, if possible.
-
Leverage AWS SDKs or APIs to perform authentication programmatically in tests, bypassing the UI login screens.
-
Use the classic Hosted UI branding option if more control over CSS and customization is needed, as it allows uploading custom CSS files (though still limited).
-
Request AWS feature enhancements or monitor AWS forums for updates on adding more customizable selectors or attributes.
the Managed Login Branding does not support adding custom data-* attributes or stable CSS selectors to login fields. Testing teams typically rely on API-based authentication or work with the available styling and structural selectors for UI automation
Currently, Amazon Cognito's Managed Login UI does not provide the ability to add custom CSS selectors like data-email to specific fields in the login screens. The Managed Login UI offers a standardized authentication experience with limited customization options.
While the Managed Login UI provides more customization options than the classic Hosted UI through the branding editor (a no-code visual editor), these customizations are primarily focused on visual elements such as:
- Logo images and placement
- Background images and colors
- Primary branding colors
- Text alignment
- Component-specific styling
The branding editor allows you to modify the look and feel of the login pages, but it doesn't support adding custom attributes or selectors to HTML elements for testing purposes. The CSS selectors in the Managed Login UI are indeed auto-generated and subject to change, making them unreliable for automated testing.
For QA testing with Cognito authentication, teams typically use alternative approaches:
- Create test user accounts with known credentials
- Use the Cognito API directly for authentication in test environments
- Mock the authentication flow in testing scenarios
- Implement end-to-end testing that interacts with the UI elements using their current selectors, with the understanding that tests may need updates if selectors change
If having stable CSS selectors for testing is a critical requirement, you might need to consider implementing a custom authentication UI instead of using the Managed Login UI, which would give you complete control over the HTML structure and CSS selectors.
Sources
Apply branding to managed login pages - Amazon Cognito
User pool managed login - Amazon Cognito
Displaying error message in Cognito managed login sign-in page | AWS re:Post
The branding editor and customizing managed login - Amazon Cognito
Relevant content
asked a year ago
