HTML Element IDs

We have refactored HTML Element IDs and started following a naming convention. This should help provide more and consistent query selectors to be used for UI and E2E tests. If you are doing UI and E2E tests, these changes might be breaking changes for you. The changes will be published to sandbox on 28th of August 2023 and released to production on 4th of September 2023. Hopefully it should be as easy as a couple of copy and paste actions for you.

Some of the IDs did not have what type of element it was such as "product-filter-job-function" which now has the suffix that indicates what type of element it is such as: product-filter-job-function-select.

Changes

• basket-remove-product-${title} to basket-remove-product-button-${title}
• basket-remove-product-modal-accept-button to basket-remove-product-confirmation-decline-button
• basket-remove-product-modal-accept-button (duplicated) to basket-remove-product-confirmation-accept-button
• campaign-create-form-contact-info-email-address to campaign-create-form-contact-info-email-address-input
• campaign-create-form-contact-info-name to campaign-create-form-contact-info-name-input
• campaign-create-form-contact-info-phone-number to campaign-create-form-contact-info-phone-number-input
• campaign-create-form-posting-details-working-location-allows-remote-work (duplicated) to campaign-create-form-posting-details-working-location-contact-info-same-as-recruiter-info-checkbox
• campaign-create-form-posting-details-organization-name to campaign-create-form-posting-details-organization-name-input
• campaign-create-form-campaign-name to campaign-create-form-campaign-name-input
• campaign-create-form-posting-details-description to campaign-create-form-posting-details-description-html-input
• campaign-create-form-posting-details-salary-indication-from to campaign-create-form-posting-details-salary-indication-from-input
• campaign-create-form-posting-details-title to campaign-create-form-posting-details-title-input
• campaign-create-form-posting-details-weekly-working-hours-from to campaign-create-form-posting-details-weekly-working-hours-from-input
• "campaign-create-form-posting-details-weekly-working-hours-to" to "campaign-create-form-posting-details-weekly-working-hours-to-input"
• campaign-create-form-posting-details-years-of-experience to campaign-create-form-posting-details-years-of-experience-range-input
• campaign-create-form-recruiter-info-email-address to campaign-create-form-recruiter-info-email-address-input
• campaign-create-form-recruiter-info-name to campaign-create-form-recruiter-info-name-input
• campaign-create-form-posting-details-urls-application-url to campaign-create-form-posting-details-urls-application-url-input
• campaign-create-form-posting-details-urls-job-page-url to campaign-create-form-posting-details-urls-job-page-url-input
• campaign-create-form-posting-details-working-location-address-line-1 to campaign-create-form-posting-details-working-location-address-line-1-input
• campaign-create-form-posting-details-working-location-address-line-2 to campaign-create-form-posting-details-working-location-address-line-2-input
• campaign-create-form-posting-details-working-location-allows-remote-work to campaign-create-form-posting-details-working-location-allows-remote-work-checkbox
• campaign-create-form-posting-details-working-location-city to campaign-create-form-posting-details-working-location-city-input
• campaign-create-form-posting-details-working-location-country to campaign-create-form-posting-details-working-location-country-input
• campaign-create-form-posting-details-working-location-postcode to campaign-create-form-posting-details-working-location-postcode-input
• campaign-edit-save to campaign-edit-save-button
• hapi-product-card-contract-remove-button to contract-remove-button
• hapi-container-products-list-product-card-${id}-toggle-in-contracts to product-add-to-contracts-button-${id}
• hapi-product-${product.product_id}-more-information-button to product-more-information-button-${product.product_id}
• hapi-container-products-list-product-card-${id}-toggle-basket to product-toggle-in-basket-button-${id}
• products-list-load-more-button to product-list-load-more-button
• wallet-topup-amount to wallet-topup-amount-input
• wallet.topup-balance-button to wallet-topup-balance-button
• wallet.pay-now-with-credit-card-button to wallet-pay-now-with-credit-card-button
• campaign-create-form-posting-requirements-${requirementName} to campaign-create-form-posting-requirements-input-${requirementName}
• campaign-create-form-posting-requirements-${requirementName} to campaign-create-form-posting-requirements-textarea-${requirementName}
• card-action-confirmation-decline to modal-action-confirmation-decline-button
• card-action-confirmation-accept to modal-action-confirmation-accept-button
• url-search-params-generator-new-parameter-name-input-${index} to url-search-params-generator-parameter-name-input-${index}
• url-search-params-generator-new-parameter-value-input-${index} to url-search-params-generator-parameter-value-input-${index}
• url-search-params-generator-map-to-parameter-checkbox-${index} to ``
• url-search-params-generator-remove-button-${index} to url-search-params-generator-remove-parameter-button-${index}
• url-search-params-generator-save-button to url-search-params-generator-save-new-parameter-button
• navigation-basket-total to basket-open-button
• table-accordion-campaigns-view-button-${campaign.campaignId} to campaign-list-layout-table-expand-campaign-details-accordion-button-${campaign.campaignId}
• contracts-add-credentials-${credentialName}-input to contracts-add-credentials-input-${credentialName}
• contracts-add-instructions-feed-url-copy-to-clipboard-button to contracts-add-instructions-feed-url-copy-to-clipboard-input
• contract-add-optional-details-contract-expiry-input to contract-add-optional-details-contract-expiry-date-picker
• order-confirmation-create-new-campaign to order-confirmation-restart-journey-button
• select-order-payment-method to order-journey-payment-method-select
• postings-filters-contract-name to product-filters-product-name-input
• select-search-sort-by to product-filters-search-sort-by-select
• use-mock-campaign-form-button to debug-panel-campaign-use-mock-campaign-button
• use-mock-campaign-id to debug-panel-campaign-get-random-campaign-id-button
• campaign-create-form-posting-details-working-location-allows-remote-work (duplicated) to debug-panel-campaign-show-campaign-form-debugger-checkbox
• checkbox-debug-common-set-component-debugging-is-enabled to debug-panel-common-show-widget-boundaries-checkbox
• get-random-contract-id-button to debug-panel-contract-use-mock-contract-button
• use-mock-contract-button to debug-panel-contract-get-random-contract-id-button
• qa-debug-environment-set-production-checkbox to debug-panel-environment-mock-environment-as-production-button
• qa-debug-environment-set-production-checkbox (duplicated) to debug-panel-environment-toggle-logs-button
• select-debug-language-locale to debug-panel-language-locale-select
• select-debug-language-locale-translation to debug-panel-language-new-translation-locale-select
• select-debug-language-key-translation to debug-panel-language-new-translation-key-select
• input-debug-language-value-translation to debug-panel-language-translation-value-input
• button-debug-language-save-translation to debug-panel-language-apply-translation-button
• checkbox-debug-language-enable-locale-debuggin to debug-panel-language-enable-locale-debugging-checkbox
• select-debug-user-journey-active-step to debug-panel-order-journey-active-step-select
• select-debug-user-journey-steps to debug-panel-order-journey-enabled-steps-select
• select-debug-user-journey-payment-methods to debug-panel-order-journey-enabled-payment-methods-select
• use-mock-product-filters-button to debug-panel-product-use-mock-product-filters-button
• use-mock-channel-id-button to debug-panel-product-get-random-channel-id-that-supports-contracts-button
• get-random-product-id-button to debug-panel-product-get-random-product-id-button
• select-debug-language-displayCurrency to debug-panel-product-currency-select
• input-debug-theme-font-family to debug-panel-theming-font-family-input
• input-debug-theme-font-face-family to debug-panel-theming-font-face-family-input
• input-debug-theme-font-face-src" to debug-panel-theming-font-face-src-input
• input-debug-theme-font-face-weight to debug-panel-theming-font-face-weight-input
• input-debug-theme-font-face-style to debug-panel-theming-font-face-style-input
• input-debug-theme-font-face-size to debug-panel-theming-font-face-size-input
• input-debug-theme-font-face-rel to debug-panel-theming-is-rel-stylesheet-checkbox
• button-debug-theme-font-options-save to debug-panel-theming-apply-font-options-button
• wallet-update-billing-details-button to wallet-billing-information-journey-button
• navigation-wallet-total to wallet-open-button
• campaign-create-form-contact-info-name (duplicated) to wallet-purchase-order-number-input

New

• campaign-create-form-posting-details-employment-type-select
• campaign-create-form-posting-details-salary-indication-currency-select
• campaign-create-form-posting-details-salary-indication-salary-period-select
• campaign-create-form-target-group-job-function-tree-select
• campaign-create-form-target-group-job-industry-select
• campaign-create-form-target-group-seniority-select
• modal-file-picker
• campaign-create-form-posting-requirements-input-tags-${requirementName}
• campaign-create-form-posting-requirements-date-picker-${requirementName}
• campaign-create-form-posting-requirements-select-${requirementName}
• campaign-create-form-posting-requirements-async-select-${requirementName}
• campaign-create-form-posting-requirements-tree-select-${requirementName}
• campaign-create-form-posting-requirements-async-tree-select-${requirementName}
• campaign-create-form-posting-requirements-file-picker-${requirementName}
• pagination-button-${type}-${page}
• contract-add-channel-async-select
• contract-add-new-group-select
• contracts-add-credentials-select-${credentialName}
• contracts-add-optional-details-purchase-price-currency-select
• language-locale-select
• campaign-create-form-posting-requirements-contract-facets
• campaign-create-form-posting-details-working-location-address-autocomplete
• campaign-create-form-posting-requirements-product-facets
• campaign-create-form-target-group-education-level-select
• product-filter-currency-select
• product-filters-job-function-tree-select
• product-filters-job-industry-select
• product-filters-job-title-async-select
• product-filters-location-async-select
• wallet-direct-charge-continue-button
• wallet-billing-information-journey-button

Removed

• select-education-levels
• select-employment-type
• postings-filters-contract-industries
• select-locale
• select-salary-period
• select-seniorities
• postings-filters-job-function