@protontech/autofill 0.0.22991789 → 0.0.33835493

package/utils/credit-card.samples.spec.js

@@ -0,0 +1,452 @@
+import { CCFieldType } from "@protontech/autofill/types";
+import { getCCFieldType } from "./credit-card";
+import { matchIFrameField } from "./re";
+import { sanitizeStringWithSpaces } from "./text";
+const fieldTest = (type, samples) => {
+    test.each(samples.map((html) => ({ html, preview: html.substring(0, 42) })))("$preview", ({ html }) => {
+        document.body.innerHTML = html;
+        const field = document.querySelector("select, input");
+        expect(getCCFieldType(field)).toBe(type);
+    });
+};
+Object.defineProperty(HTMLElement.prototype, "innerText", {
+    get() {
+        return this.textContent;
+    },
+});
+describe("Credit-card field samples", () => {
+    describe("CCFieldType.NUMBER", () => {
+        const samples = [
+            `<input ($focusout)="focusout($element, %event)" ($input)="input($element, %event)" aria-describedby="" aria-invalid="false" aria-labelledby="idms-input-labelledby-1710841688476-1" aria-required="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="generic-input-field form-textbox form-textbox-text content-input credit-card-number placeholder-default-direction force-ltr" data-fathom="cc-number" id="input-1710841688476-1" spellcheck="false" type="text" value="" {$aria-invalid}="hasErrors" {$aria-required}="isRequired" {$disabled}="disabled" {$type}="inputType" {($value)}="value" {input-handler}="inputHandler"/>`,
+            `<input _ngcontent-wrg-c49="" autocomplete="cc-number" class="form-control card-number ng-untouched ng-pristine ng-valid" data-fathom="cc-number" id="cc-number" maxlength="19" name="number" placeholder="XXXX XXXX XXXX XXXX" type="tel" value=""/>`,
+            `<input aria-describedby="adyen-checkout-encryptedCardNumber-1710844611186-ariaContext" aria-invalid="false" aria-label="Card number" aria-required="true" autocomplete="cc-number" class="js-iframe-input input-field" data-fathom="cc-number" data-fieldtype="encryptedCardNumber" data-type="gsf" id="adyen-checkout-encryptedCardNumber-1710844611186" inputmode="numeric" maxlength="24" placeholder="1234 5678 9012 3456" style="display:block" type="text" value=""/>`,
+            `<input aria-describedby="adyen-checkout-encryptedCardNumber-1710851944813-ariaError" aria-invalid="false" aria-label="Card number" aria-required="true" autocomplete="cc-number" class="js-iframe-input input-field" data-fathom="cc-number" data-fieldtype="encryptedCardNumber" data-type="gsf" id="adyen-checkout-encryptedCardNumber-1710851944813" inputmode="numeric" maxlength="24" placeholder="1234 5678 9012 3456" style="display:block" type="text" value=""/>`,
+            `<input aria-describedby="adyen-checkout-encryptedCardNumber-1710851944813-ariaError" aria-invalid="false" aria-label="Card number" aria-required="true" autocomplete="cc-number" class="js-iframe-input input-field" data-fathom="cc-number" data-fieldtype="encryptedCardNumber" data-type="gsf" id="adyen-checkout-encryptedCardNumber-1710851944813" inputmode="numeric" maxlength="24" placeholder="1234 5678 9012 3456" style="display:block" type="text" value=""/>`,
+            `<input aria-describedby="adyen-checkout-encryptedCardNumber-1710852060380-ariaError" aria-invalid="false" aria-label="Card number" aria-required="true" autocomplete="cc-number" class="js-iframe-input input-field" data-fathom="cc-number" data-fieldtype="encryptedCardNumber" data-type="gsf" id="adyen-checkout-encryptedCardNumber-1710852060380" inputmode="numeric" maxlength="24" placeholder="1234 5678 9012 3456" style="display:block" type="text" value=""/>`,
+            `<input aria-describedby="ariaErrorField" aria-invalid="true" aria-label="Card number" aria-required="true" autocomplete="cc-number" class="js-iframe-input input-field" data-fathom="cc-number" data-type="gsf" id="encryptedCardNumber" maxlength="24" placeholder="1234 5678 9012 3456" style="display:block" type="tel" value=""/>`,
+            `<input aria-describedby="ariaErrorField" aria-invalid="true" aria-label="Card number" aria-required="true" autocomplete="cc-number" class="js-iframe-input input-field" data-fathom="cc-number" data-type="gsf" id="encryptedCardNumber" maxlength="24" placeholder="1234 5678 9012 3456" style="display:block" type="tel" value=""/>`,
+            `<input aria-describedby="ariaId_9" aria-invalid="true" aria-labelledby="ariaId_10" autocomplete="off-card-number" class="jfk-textinput b3id-text-input b3-text-input numeric b3-invalid-control" data-fathom="cc-number" data-is-secure="true" data-was-visible="true" maxlength="19" name="cardnumber" type="tel" value=""/>`,
+            `<input aria-describedby="creditCardNumber-field-message" aria-invalid="false" autocomplete="cc-number" class="textbox__control textbox__control--fluid textbox__control--large" data-fathom="cc-number" id="creditCardNumber" maxlength="19" name="creditCardNumber" type="text" value=""/>`,
+            `<input aria-describedby="creditCardNumber-field-message" aria-invalid="false" autocomplete="cc-number" class="textbox__control textbox__control--fluid textbox__control--large" data-fathom="cc-number" id="creditCardNumber" maxlength="19" name="creditCardNumber" type="text" value=""/>`,
+            `<input aria-describedby="error-creditCardNumber" aria-required="true" class="text-input text-card-number" data-fathom="cc-number" encrypt="true" id="input-creditCardNumber" maxlength="32" name="field_creditCardNumber" type="text" value=""/>`,
+            `<input aria-describedby="error-creditCardNumber" aria-required="true" class="text-input text-card-number" data-fathom="cc-number" encrypt="true" id="input-creditCardNumber" maxlength="32" name="field_creditCardNumber" type="text" value=""/>`,
+            `<input aria-describedby="error-creditCardNumber" aria-required="true" class="text-input text-card-number" data-fathom="cc-number" encrypt="true" id="input-creditCardNumber" maxlength="32" name="field_creditCardNumber" type="text" value=""/>`,
+            `<input aria-describedby="error-creditCardNumber" aria-required="true" class="text-input text-card-number" data-fathom="cc-number" encrypt="true" id="input-creditCardNumber" maxlength="32" name="field_creditCardNumber" type="text" value=""/>`,
+            `<input aria-describedby="error-creditCardNumber" aria-required="true" class="text-input text-card-number" data-fathom="cc-number" encrypt="true" id="input-creditCardNumber" maxlength="32" name="field_creditCardNumber" type="text" value=""/>`,
+            `<input aria-describedby="error-creditCardNumber" aria-required="true" class="text-input text-card-number" data-fathom="cc-number" encrypt="true" id="input-creditCardNumber" maxlength="32" name="field_creditCardNumber" type="text" value=""/>`,
+            `<input aria-describedby="error-for-number tooltip-for-number" aria-invalid="false" autocomplete="cc-number" class="input-placeholder-color--lvl-22" data-current-field="number" data-fathom="cc-number" id="number" inputmode="numeric" name="number" pattern="[0-9]*" placeholder="Card number" required="" style='font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;letter-spacing:normal;line-height:1.5;color:rgb(0,0,0);text-decoration:none;text-transform:none;--placeholder-color:hsl(0,0%,44%);padding:calc((-1.5rem + max(2.35714rem,3.42857rem))/2) 0.785714rem;transition:padding 0.2s ease-out 0s' type="text" value=""/>`,
+            `<input aria-describedby="error-for-number tooltip-for-number" aria-invalid="false" autocomplete="cc-number" class="input-placeholder-color--lvl-22" data-current-field="number" data-fathom="cc-number" id="number" inputmode="numeric" name="number" pattern="[0-9]*" placeholder="Card number" required="" style='font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;letter-spacing:normal;line-height:1.5;color:rgb(0,0,0);text-decoration:none;text-transform:none;--placeholder-color:hsl(0,0%,44%);padding:calc((-1.5rem + max(2.35714rem,3.42857rem))/2) 0.785714rem;transition:padding 0.2s ease-out 0s' type="text" value=""/>`,
+            `<input aria-describedby="error-for-number tooltip-for-number" aria-invalid="false" autocomplete="cc-number" class="input-placeholder-color--lvl-22" data-current-field="number" data-fathom="cc-number" id="number" inputmode="numeric" name="number" pattern="[0-9]*" placeholder="Numéro de carte" required="" style='font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;letter-spacing:normal;line-height:1.5;color:rgb(0,0,0);text-decoration:none;text-transform:none;--placeholder-color:hsl(0,0%,44%);padding:calc((-1.5rem + max(2.35714rem,3.42857rem))/2) 0.785714rem;transition:padding 0.2s ease-out 0s' type="text" value=""/>`,
+            `<input aria-describedby="error-for-number tooltip-for-number" aria-invalid="true" autocomplete="cc-number" class="input-placeholder-color--lvl-22" data-current-field="number" data-fathom="cc-number" id="number" inputmode="numeric" name="number" pattern="[0-9]*" placeholder="Card number" required="" style="font-family:SuisseIntl,sans-serif;font-size:1rem;letter-spacing:normal;line-height:1.5;color:rgb(0,0,0);text-decoration:none;text-transform:none;--placeholder-color:rgba(0,0,0,0.56);padding:calc((-1.5rem + max(2.35714rem,3.42857rem))/2) 0.785714rem;transition:padding 0.2s ease-out 0s" type="text" value=""/>`,
+            `<input aria-describedby="field-description-number" aria-label="Card Number" autocapitalize="none" autocomplete="cc-number" autocorrect="off" class="CardInput is-empty" data-fathom="cc-number" id="cardnumber" inputmode="numeric" maxlength="22" name="cardnumber" placeholder="Card number" spellcheck="false" type="tel" value=""/>`,
+            `<input aria-describedby="field-description-number" autocapitalize="none" autocomplete="cc-number" autocorrect="off" class="number" data-braintree-name="number" data-fathom="cc-number" id="credit-card-number" inputmode="numeric" maxlength="22" name="credit-card-number" pattern="\d*" placeholder="Card Number" spellcheck="false" type="text" value=""/>`,
+            `<input aria-describedby="id_desc_card_number error-ccnumber" aria-invalid="false" autocapitalize="off" autocomplete="cc-number" autocorrect="off" class="input-element w-full px-3" data-fathom="cc-number" data-testid="ccnumber" id="ccnumber" maxlength="23" name="cardnumber" placeholder="Card number" spellcheck="false" value=""/>`,
+            `<input aria-describedby="null knownCardBrandDesc cardBrandIconsDesc" aria-invalid="false" aria-required="true" autocomplete="billing cc-number" class="p-Input-input Input p-CardNumberInput-input Input--empty p-Input-input--textRight" data-fathom="cc-number" dir="ltr" id="Field-numberInput" inputmode="numeric" name="number" placeholder="1234 1234 1234 1234" style="padding-inline-end: 151.2px" type="text" value=""/>`,
+            `<input aria-describedby="null knownCardBrandDesc cardBrandIconsDesc" aria-invalid="false" aria-required="true" autocomplete="billing cc-number" class="p-Input-input Input p-CardNumberInput-input Input--empty p-Input-input--textRight" data-fathom="cc-number" dir="ltr" id="Field-numberInput" inputmode="numeric" name="number" placeholder="1234 1234 1234 1234" style="padding-inline-end:151.2px" type="text" value=""/>`,
+            `<input aria-describedby="null knownCardBrandDesc cardBrandIconsDesc" aria-invalid="false" aria-required="true" autocomplete="billing cc-number" class="p-Input-input Input p-CardNumberInput-input Input--empty p-Input-input--textRight" data-fathom="cc-number" dir="ltr" id="Field-numberInput" inputmode="numeric" name="number" placeholder="1234 1234 1234 1234" style="padding-inline-end:155.2px" type="text" value=""/>`,
+            `<input aria-describedby="null knownCardBrandDesc cardBrandIconsDesc" aria-invalid="false" aria-required="true" autocomplete="billing cc-number" class="p-Input-input Input p-CardNumberInput-input Input--empty p-Input-input--textRight" data-fathom="cc-number" dir="ltr" id="Field-numberInput" inputmode="numeric" name="number" placeholder="1234 1234 1234 1234" style="padding-inline-end:155.2px" type="text" value=""/>`,
+            `<input aria-disabled="false" aria-label="Card number" autocomplete="off" class="whsOnd zHQkBf" data-fathom="cc-number" data-initial-value="" jsname="YPqjbf" tabindex="0" type="tel" value=""/>`,
+            `<input aria-invalid="false" aria-label="1111 1111 1111 1111" aria-placeholder="1111 1111 1111 1111" autocomplete="cc-number" autocorrect="off" class="card-number field" data-fathom="cc-number" id="checkout-frames-card-number" inputmode="numeric" name="cardnumber" placeholder="1111 1111 1111 1111" spellcheck="false" value=""/>`,
+            `<input aria-invalid="false" aria-label="Card number" autocomplete="cc-number" autocorrect="off" class="CheckoutInput CheckoutInput--tabularnums Input Input--empty" data-1p-ignore="false" data-fathom="cc-number" id="cardNumber" inputmode="numeric" name="cardNumber" placeholder="1234 1234 1234 1234" spellcheck="false" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Card number" autocomplete="cc-number" autocorrect="off" class="CheckoutInput CheckoutInput--tabularnums Input Input--empty" data-1p-ignore="false" data-fathom="cc-number" id="cardNumber" inputmode="numeric" name="cardNumber" placeholder="1234 1234 1234 1234" spellcheck="false" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Card number" autocomplete="cc-number" autocorrect="off" class="sc-hIagIn sc-kjOQFR bUpLMa gkMlpk" data-fathom="cc-number" data-testid="cardNumberInput" id="cardNumber" inputmode="numeric" name="cardNumber" placeholder="xxxx xxxx xxxx xxxx" spellcheck="false" style="background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgNS41SDI1QzI1LjgyODQgNS41IDI2LjUgNi4xNzE1NyAyNi41IDdWMjFDMjYuNSAyMS44Mjg0IDI1LjgyODQgMjIuNSAyNSAyMi41SDNDMi4xNzE1NyAyMi41IDEuNSAyMS44Mjg0IDEuNSAyMVY3QzEuNSA2LjE3MTU3IDIuMTcxNTcgNS41IDMgNS41WiIgZmlsbD0iI0U5RTlFOSIgc3Ryb2tlPSIjN0I3QjdCIi8+CjxyZWN0IHg9IjQiIHk9IjEwIiB3aWR0aD0iNCIgaGVpZ2h0PSIzIiBmaWxsPSIjQzRDNEM0Ii8+CjxyZWN0IHg9IjQiIHk9IjE3IiB3aWR0aD0iNCIgaGVpZ2h0PSIxIiBmaWxsPSIjN0I3QjdCIi8+CjxyZWN0IHg9IjkuMzMiIHk9IjE3IiB3aWR0aD0iNCIgaGVpZ2h0PSIxIiBmaWxsPSIjN0I3QjdCIi8+CjxyZWN0IHg9IjE0LjY2IiB5PSIxNyIgd2lkdGg9IjQiIGhlaWdodD0iMSIgZmlsbD0iIzdCN0I3QiIvPgo8cmVjdCB4PSIyMCIgeT0iMTciIHdpZHRoPSI0IiBoZWlnaHQ9IjEiIGZpbGw9IiM3QjdCN0IiLz4KPC9zdmc+Cg==);background-repeat:no-repeat;background-position:right 11px center" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Credit or debit card number" autocomplete="cc-number" autocorrect="off" class="InputElement is-empty Input Input--empty" data-elements-stable-field-name="cardNumber" data-fathom="cc-number" inputmode="numeric" name="cardnumber" placeholder="" spellcheck="false" tabindex="0" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Credit or debit card number" autocomplete="cc-number" autocorrect="off" class="InputElement is-empty Input Input--empty" data-elements-stable-field-name="cardNumber" data-fathom="cc-number" inputmode="numeric" name="cardnumber" placeholder="1234 1234 1234 1234" spellcheck="false" tabindex="0" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Credit or debit card number" autocomplete="cc-number" autocorrect="off" class="InputElement is-empty Input Input--empty" data-elements-stable-field-name="cardNumber" data-fathom="cc-number" inputmode="numeric" name="cardnumber" placeholder="Card Number" spellcheck="false" tabindex="0" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Credit or debit card number" autocomplete="cc-number" autocorrect="off" class="InputElement is-empty Input Input--empty" data-elements-stable-field-name="cardNumber" data-fathom="cc-number" inputmode="numeric" name="cardnumber" placeholder="Card number" spellcheck="false" tabindex="0" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Credit or debit card number" autocomplete="cc-number" autocorrect="off" class="InputElement is-empty Input Input--empty" data-elements-stable-field-name="cardNumber" data-fathom="cc-number" inputmode="numeric" name="cardnumber" placeholder="Card number" spellcheck="false" tabindex="0" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-required="false" autocomplete="on" class="cn ci fi fk fj fc e0 e3 dv fd ex an ed go gp gq gr gs gt gu bm bn bo bp bl gv gw gx" data-fathom="cc-number" data-testid="card-number" id="card-number" inputmode="numeric" name="card-number" placeholder="" type="text" value=""/>`,
+            `<input aria-invalid="false" autocapitalize="off" autocomplete="off" autocorrect="off" class="form-control creditCard input-sm" credit-card-input="" credit-card-type="true" credit-card-type-class="" data-fathom="cc-number" data-ng-attr-placeholder="{{ 'CardNumberPlaceholder' | phrase }}" id="card-number" name="card.number" ng-blur="sendCardGa(form['card.number'], form['card.month'], form['card.year'],form['card.security'])" ng-change="resetRemoteValidation(form['card.number']);triggerScreenReaderValidation(form['card.number']); updateCvcLength()" ng-class="{'credit-card-type': ccType}" ng-maxlength="25" ng-model="card.number" ng-required="option.requireCard" only-digit-input="" placeholder="Card Number" required="" spellcheck="off" type="tel" value=""/>`,
+            `<input aria-invalid="false" autocomplete="cc-number" class="xo-member-19s4o06-text_input_control-text_body-text_input_control_with_icon_right-label_placeholder_shown_and_not_focused-text_body" data-fathom="cc-number" data-ppui="true" data-testid="split-card-number" id="cardNumber" maxlength="19" minlength="19" name="cardnumber" placeholder=" " required="" type="text" value=""/>`,
+            `<input aria-invalid="false" autocomplete="cc-number" class="xo-member-19s4o06-text_input_control-text_body-text_input_control_with_icon_right-label_placeholder_shown_and_not_focused-text_body" data-fathom="cc-number" data-ppui="true" data-testid="split-card-number" id="cardNumber" maxlength="19" minlength="19" name="cardnumber" placeholder=" " required="" type="text" value=""/>`,
+            `<input aria-invalid="false" autocomplete="off" class="css-152nbe2" data-fathom="cc-number" id="payment__field--cc" maxlength="19" name="creditCardNumber" required="" type="text" value=""/>`,
+            `<input aria-label="Card number" autocomplete="cc-number" autocorrect="off" data-fathom="cc-number" id="cc" inputmode="numeric" maxlength="23" name="cc" pattern="[0-9 ]*" placeholder="Enter card number" required="" spellcheck="false" type="tel" value=""/>`,
+            `<input autocapitalize="none" autocomplete="off" autocorrect="off" cardtype="default" class="axiom-checkout-element-disabled" data-fathom="cc-number" id="credit-card-number-input" inputmode="numeric" maxlength="19" name="credit-card-number-input" type="tel" value=""/>`,
+            `<input autocapitalize="off" autocomplete="off" autocorrect="off" class="input-material__field input-cb-card-number idz_hide" data-fathom="cc-number" id="cardNumber" maxlength="19" name="cardNumber" placeholder="**** **** **** ****" step="1" type="tel" value=""/>`,
+            `<input autocomplete="cc-number" autofocus="" class="cardNumber" data-fathom="cc-number" id="fCardNumber" maxlength="19" name="vads_card_number" pattern="[0-9]*" size="19" type="tel" value=""/>`,
+            `<input autocomplete="cc-number" autofocus="" class="cardNumber" data-fathom="cc-number" id="fCardNumber" maxlength="19" name="vads_card_number" pattern="[0-9]*" size="19" type="tel" value=""/>`,
+            `<input autocomplete="cc-number" data-fathom="cc-number" id="Ecom_Payment_Card_Number" maxlength="30" name="Ecom_Payment_Card_Number" size="18" type="tel" value=""/>`,
+            `<input autocomplete="off" autofocus="" class="cardNumber" data-fathom="cc-number" id="fCardNumber" maxlength="19" name="vads_card_number" pattern="[0-9]*" size="19" type="tel" value=""/>`,
+            `<input autocomplete="off" class="a-input-text a-form-normal pmts-account-Number" data-fathom="cc-number" id="pp-3XyMeN-17" name="addCreditCardNumber" spellcheck="false" type="tel" value=""/>`,
+            `<input autocomplete="off" class="a-input-text a-form-normal pmts-account-Number" data-fathom="cc-number" id="pp-4MEsHB-17" name="addCreditCardNumber" spellcheck="false" type="tel" value=""/>`,
+            `<input autocomplete="off" class="a-input-text a-form-normal pmts-account-Number" data-fathom="cc-number" id="pp-Ka9je1-17" name="addCreditCardNumber" spellcheck="false" type="tel" value=""/>`,
+            `<input autocomplete="off" class="a-input-text a-form-normal pmts-account-Number" data-fathom="cc-number" id="pp-v9rInZ-17" name="addCreditCardNumber" spellcheck="false" type="tel" value=""/>`,
+            `<input autocomplete="off" class="cc-number" data-fathom="cc-number" id="cc-number" inputmode="numeric" maxlength="20" name="cardNumber" pattern="[0-9]*" value=""/>`,
+            `<input autocomplete="off" class="input-text wc-credit-card-form-card-number" data-fathom="cc-number" id="eh_authorize_net_aim_card-card-number" maxlength="20" name="eh_authorize_net_aim_card-card-number" placeholder="•••• •••• •••• ••••" type="text" value=""/>`,
+            `<input class="comet-input comet-input-lg" data-fathom="cc-number" data-meta="Field" direction="ltr" id="cardNum" label="Card number" minlength="10" placeholder="" type="text" value=""/>`,
+            `<input class="form-control" data-fathom="cc-number" name="number" pattern="[\d| ]{16,22}" placeholder="Card Number" required="" type="tel" value=""/>`,
+            `<input class="pl-input pl-hidden sf-hidden" data-fathom="cc-number" id="pl-pm-cards_5-styleOfIframe-cardNumber" placeholder="Numéro de carte" placeholder-color="transparent" type="tel" value=""/>`,
+            `<div class="input input_error input_icon input_left input_primary" style=""><input autocapitalize="none" autocomplete="section-billing billing cc-number" autocorrect="off" id="creditCardNumber" maxlength="19" spellcheck="false" aria-required="true" class="input--text" type="text" value="" style="" aria-invalid="true"><span class="swa-icon swa-icon_small input--icon input--icon_error swa-icon_error" icon="swa-icon_error" role="presentation"><span role="presentation" class="swa-icon--icon"></span></span></div>`,
+            `<x-text-control class="control control-text ng-touched ng-dirty ng-invalid empty-value"><label for="x-text-control-input-card_number">Card number</label><div class="control-input-wrapper"><input class="control-input__with-icon tether-target tether-abutted tether-abutted-left tether-element-attached-top tether-element-attached-left tether-target-attached-bottom tether-target-attached-left" id="x-text-control-input-card_number" name="card_number" type="text" autocomplete="cc-number" inputmode="numeric" value=""><x-control-icon class="i control-icon i-card"></x-control-icon><span class="i control-success sf-hidden"></span><x-control-preloader></x-control-preloader></div><x-control-hint><span class="i control-hint sf-hidden" role="button" hidden="" title="null"></span></x-control-hint></x-text-control>`,
+            `<input id="card-number" maxlength="25" tabindex="1" type="tel" placeholder="1234 1234 1234 1234" required="" value="">`,
+            `<div><label for="cardnr">Numar card:</label><input name="cardnr" id="cardnr" type="text" size="19" maxlength="19" autocomplete="off" pattern="\d*" value="" placeholder="1234 1234 1234 1234"><div class="image-help" style="display:none"></div></div>`,
+            `<span class="input__contain input__error"><input name="number" type="tel" inputmode="numeric" id="wag-checkout-contact-info-number" data-testid="payment-card-number-input" autocomplete="cc-number" title="Please fill out this field" aria-label="Enter card number" class="wag-checkout-cc-form-error" value="2342 3542 3523 " aria-describedby="wag-checkout-card-number-error"><label class="input__title" for="number">*&nbsp;Enter card number</label><span class="credit-card__img"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABCCAYAAAC7K5PxAAAAAW9yTlQBz6J3mgAAAAFzUkdCAK7OHOkAAAwjSURBVHja7Z1rjF3Vdcd/a59z7rmveTP2jGdsj20wxMZBYBomFNwopNAE0rRqS9TQolSpQlJS8oWqadKoX9qmUj/0IdQoX9pIVSXSqFXVAAppQhxqEoNpwa6B1IDHHnvGjJmHx3Of57FXP9wZwIbY99y5c66lzl+6Gl3N2Xvttf5nrb3OOnvvKwCLi4sfKJVKPwAKqiqso2MQEQXKxWLxjp6enudkcXHxA+Vy+aC1dp2YKwjGGC0UCuMyNTW1pKpFgP7+fnK5XKfH9v8a1WqV+fl5AESkZIACrJNzpSCXy9Hf37/ytWBW5px1cq4crHChqmI6PZh1XBrrBF3hcDsl2J6aJnrpGDoxSfTaCezpM2ilCiKginR3YUaHca8Zw+wYw921E9l4VVtka20WXXgNu3Qclk6ilRm0du5t2Z4P2Y2Ynq1IcQzpvQbp2tIRO6VKUPzSMepPPEX05H7sy8fQM2fxEXT5/xfn+QpYYEnAGx1Grr+WzMd/Ee+uD+FsT2YwLZ9BzzxNPPk9dO5/sOUZshnbEKK8NYYVCICBOIIo0w9d2zCb78CMfhjTvzs1m8np06cVYGRkZM2EhE89Q/DINwmeOkBmsYQFIhTLuw3znoMEHMBBMEAw2I//ibvIPHAf7s03XLKtnTuKvvYo0Ykn8MM3AYisElvQJoQLYAw4RjAGQvLI0AcxOz+FGfkwmLW5x6emphry15Kg6Pkj1P7sb4gefwo3jAiWSVktHCCDEBRyZH79brJfeQjnmm0XXKNLp4he+ga8/m08KkSRErVBuBHIuEJoQYZvw+x5CDP0wbbbbk0J0lKZ6tceof63f49XqlBHm/KUxMYCfIRgwwDZLz1I7oufQY2gr/8L8Qt/iRdMEwSKXQPhIuC7QkQGdt6Pc8NDiN/Xtv7XjKDolVep/N6XMfsPEqLE7bfNu+ACgmA+eTfZB7vQiUdxgDBei9viQhiBjCfEve9Hxv8CM7CnLf2uENTWNDv84Y8pf/S3MfsPUkuJHIAIiByleOKf8J78OoSWsB2xtAlYhVqgOAtHiL9/P/HJJ9vaf3sIimPCx75P5d7PwckpamsS0H4WBJOLKe6bR3aVYLKMe3QegrgRh1JCLVRMbRZ74EHiV7+F2rAt/a6eIGsJvvc01c88jM7OE6ZKDhjPUhg/j7+t2sjJDZjZGpmfLqROUmgViWrooa/CicdAVx9DVk1QdPhlqp/7Enp2jig1UzQgBnJ7z+OPVbggnjpg3qzhvboI1r77AWsNEVmQsEJ06E+IZw41l8tfAqsiyM7NU3noqziT06l7jiL4V5fJXVfiPXN3B5yZCu6pEiCpkhRacIMF7LNfQWtnV9VX6wTFMbU/fwQ58HzKcw6A4PUH5Peev/STroBzcgkzXyNVhoB6pHhLx4ie/xrErc9HLRMUHDhE8PV/TN1zAMQo+ZuWMNnLpGoCEinuifMQpxvqoEESJ/4Nnd7fch8tEaTVGtU//Wucaq0tlYFEshG8rRUym6s0JdyAORfgnCmTNkOq4GpMePivICq31EdLBAX/8Z/YHzxD0AHvcTxL/vqEygq4p8sQpO9FQazI3JGWn4+SExRF1P/um7jaXKGznVAEb7SGOxA05z0rEJBKhHO2A14EuCLYV/4Bomri9okJCg+/TPz0sx3xHgH87ZWWZ07nbLWRdqeMwCosHEbPHkrcNjlB//pdvGq9A/SA1xfgDdVpqYYkYM6HmMWgUUBLEargGSU++UTitokI0kqV4Ls/TK3GdoFsBG9THcm2eGsIYLWRcnfg7ooisNMH0PpConaJCIqPTxK9fIy4Q+HNHV69cc25AFmL9w+XQaQKpUl0/n+TjTeRkEMv4taC1FNrAMlFuL1xsuTgXZ2AqUVQi9JfLqPgGoW5FxI1SzRMe/QYmZT1akBw8xbJxavzIAFCi9RiUs+3AeNANP/TZG2SXBy9PtGR5EAB6YoRrw3SLUg17bLush4WpDLdWInSJJonKAjR2YWOJAgAJtc+o0pab/MugrVga7NA0LzezV6oYYgunOvI/ANcvu6WBPXOaKGqEFQbKV2zejd9pbVoPaAjOSq0dcqQuEMepCyn2c1Xt5PlMiIdmFrXAJ1SQkAcJ1GT5glyHCSX7Zx27dxflnIlYQUCSKYHxWt+qE13nskggwMdW21vy+2TrNlkd3G7YERQtwtx1oAgXAczvKFjBMUVt23Tn/odIsgByW8Ap/mnyUT2dnfuaDyTpKyYoGjFQYM2rC1wQXPOqhdztKYHmO6tIM3fIIkIcvZcR9ihKSguO9iyuzqCFPAcbDb9XTcCRLEife9L1C4ZQTddj+3vpRO5nAaGaG71BMV5D/z2hcumYYSIHGbwxmTNEl08vBHvxt0JcpD2QVGC6SyrirEK2ut3YPTgGjC9VyPd2xK1S0SQZDzcOz+EprvMrCEbiGYyrWdzCviGuD9D2u4jNOZR2XQ7uPlEbRNr6//ynUSDAx0Jc3HZI5jKtvaqQCHuyaCFTOrhTUQITRF37GOJ2yZW1bl6jMw9H8HtQMlHVQkmchC24MKOYDfmO7Jt2nVANo5D367EbZMP1zH4v/NJ4v4+TMpeJEAwkyWY9pMRpGC7PeKBXOreY0SwTg732vuQBM8/b7VvRah3y414v/ZRPJN+oNMYqq8U0bppniRHiEeLjb2TKUIAx1F04z7Mpttb6qM1h/dc8n/8ReytN+N1wIvCMz6VF7sgbi7UxSNF4qvS9x7HEbR3N87eP0RthIalxFtSWo7IZssI+T/4PGzagJu2HynUJ/LUT10m1FmwvT7RSCH1tNM1gvi9yK4HMD3b0DcOYo9/B63OJupnVVOme+c+vM/fjxTzaUcP4qqherSbaNZ7by0UtOgSbe1qFEdT9B4jIJ6Pbr8XZ8tdNBaIe+D6JL1TVkWQZH383/0U7m/+CuJ5qSZIAkSzHtXD3cSL7oWaaKNiHW3pxvZmUxzVMjnGoKMfw3nfp8ErAIIZvhVn7B7IJTstZdU2NUODZB9+AO837sZkMjhp78OZylI90kV8fpkkbVSr481F4sEcSHqLyI0A4iAjd+C8/wtIcXPjHyIND3IySMLzq9pSNXR2bif75d8H3yf69uNIqZTedshYqE/kUaC4u4yMKtFwATuUb1gspaq1Y0BcH0buwuz+LNK7sy39tq2s6+y+luwffYF6Xw/20X+H6TeISePmVYiFeCJPMLYD9wYX8SYRTGORxlpDlutsuUHs6C9hrvs0pu/atnXf1rq7c802sg8/QLhlBPOt71A/9CJE0Zou1XIBfA/vtluwv/WryL48vP4oMvMsblxt+kyelvQ1gBjMwC7Y+gmcsY8jxdH269dOmOGNZD57H+F1O+CfH8Pu/wlMTII2f3jS5bByuJI6Du7OHchHbsO/9x7c8ZtQ14HiJuTE4zhnn8HOvYJD3D6iBJzlxy9T3IRuuAXdcjfOyO3gFtptzrU9TMlOTBL96CDBk/vRQ0eIJqcwYfhW6EtiL6GRAwhg/QyZHWPI+E14d+7D/YVxzNCGC67X2lxjP870j2D2v4jPHUdsDdXl5U80PwCR5exMwKrBKW6CgT3I8D5k+OeR7u1tt10qp101LKXo/Dns1BtEz76A/vh56j/5b+LpM7hLb29l1Hd85KJPDGhvN87mEbxbb8bcuhd37x5kZAjT23Np8cESVGfQuaPo3Isw8xy2dBJqizgub50V907vkosKFLHJQ24IM3g9MvhzyOBeyA8j2YHGYQ1rgPQIeqexlkrYuQX0zTnsqxPo8VPoiVNE0zPo+RK6eB6p1tGuPFIsIn3duKPD6NZRzPYtOFePYa7qR/p7kUKy9yrENagvYmtzjVMWlyaQyhS2NIPW5pG43NjoKxnU60a8AlIcQvKjaGEU07cD/IHGiVaZ7jW3VUcIuoCsSrXxKVegVkfDEMII4hhcF1wHyWQgl8UU8kg+B9k2vQ21dTSsNvaMxjWwARpHiEaoGMR4YFzEzaJODnFz4ORSPVZmhaCOnVkq+VzD6Ff1r76zpDA+4vvg9749nov+8jO+pz7UDstfx2WwTtAVDrP8axtUq8n38K9jbbDChYioAcoA8/Pz6yRdAXjnj2sA5fWfp7lCsfLzNKanp+e5QqEwLiKllXC3js5BRFRESoVCYbynp+e5/wPuXMXxsn2AHgAAAABJRU5ErkJggg==" alt="Mastercard" data-testid="add-card-img"></span></span>`,
+            `<div class="unzerInput"><input id="card-number" type="tel" placeholder="4444 3333 2222 1111" pattern="\d*" autocomplete="off" autocorrect="off" spellcheck="false" style="display: block;"></div>`,
+            `<div aria-live="polite" aria-atomic="true" class="numberDiv"><label for="accountNumber"><span id="accountNumberLabelBefore"><a tabindex="-1" href="#" class="sf-hidden"></a></span><span id="accountNumberModalBefore"><a class="modals sf-hidden" tabindex="-1" href="#accountNumberModal" rel="modal:open"></a></span><span id="accountNumberModal" style="display:none"></span><span id="accountNumberLabelText" class="sf-hidden">Card number</span><span id="accountNumberLabelAfter"></span></label><input type="tel" id="accountNumber" maxlength="19" autocomplete="off" class="enterKeyStroke" aria-describedby="informativeIcon" tabindex="216" value=""><i id="ccicon" class="fa fa-credit-card fa-lg" role="img" aria-label="Secure Data Field"></i></div>`,
+            `<div class="add-payment-card-level card-form-group input-parent-card-form-group" style="">	<div data-testid="card-number-label" class="form-group-label card-label-text-styling server-validation-label-color">Card number</div>	<input data-testid="card-number-input" type="tel" class="card-form-input card-form-input-mid required card-number-input card-number-entry input-box-border-style server-validation-input-border-bottom" aria-label="Card number" minlength="15" maxlength="16" name="cardNum" id="panel1045" value="" style="">	<div class="card-type-img-input card-type-image-display"><img id="cardImage" class="card-image-input card-popup-mobile-styling" src="/cnc/media/1.0.86/images/dgsImages/paymentPanelImages/credit-card@3x.png" alt="" title=""></div>	<img src="/cnc/media/1.0.86/images/dgsImages/alert-hexagon@3x.png" alt="Kohls" class="alert-circle-icon alert-hexagon" style="visibility: visible;">	<div data-testid="card-number-error-text" class="error-message-contact ml-24" style="visibility: visible;">Please enter a valid card number.</div></div>`,
+            `<div class="wt-form__field"><label data-clg-id="WtFormFieldLabel" for="P0-1" class="wt-label wt-label--small">Numéro de carte<span> </span><span aria-hidden="true" class="wt-label__required"></span><span class="wt-screen-reader-only">Obligatoire</span></label><div class="wt-input__append-wrapper wt-input__prepend-wrapper"><span id="addon-cc7123b4-c572-4dae-8c21-3dbc1dff4e9c" class="wt-input__prepend wt-input__prepend--small" style=""><div class="wt-vertical-align-middle wt-display-inline-block"><span role="img" aria-label="Carte" data-testid="cc-icon" class="wt-icon--logo wt-icon--base-xs etsy-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4h16V6H4zm0 10v-7h16v7z"></path></svg></span></div><span class="wt-screen-reader-only"></span></span><input data-clg-id="WtFormFieldMakedInput" type="text" pattern="[0-9]*" inputmode="numeric" id="P0-1" name="number" class="wt-input wt-input--small wt-pl-xs-7 wt-pr-xs-7" aria-describedby="wt-formfield-error-7182e91d-a5bd-4861-b84f-d38008e7e465    " touched="true" aria-invalid="true"><span id="addon-cc7123b4-c572-4dae-8c21-3dbc1dff4e9c" class="wt-input__append wt-input__append--small" style=""><span class="etsy-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13 13v5h-2v-5z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4 9.25A.25.25 0 0 1 4.25 9H7.5V6.5a4.5 4.5 0 0 1 9 0V9h3.25a.25.25 0 0 1 .25.25V18a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4zM9.5 6.5a2.5 2.5 0 0 1 5 0V9h-5zM8 20a2 2 0 0 1-2-2v-7h12v7a2 2 0 0 1-2 2z"></path></svg></span><span class="wt-screen-reader-only"></span></span></div><div data-clg-id="WtFormFieldError" class="wt-validation wt-display-flex-xs wt-align-items-top"><div class="wt-validation__icon__frame wt-validation__icon__frame--small"><span class="wt-validation__icon wt-icon--smaller-xs etsy-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 6v8h2V6zm1 9.25a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5"></path></svg></span></div><ul id="wt-formfield-error-7182e91d-a5bd-4861-b84f-d38008e7e465" class="wt-list-unstyled"><li class="wt-validation__message wt-validation__message--small">Indiquez un numéro de carte</li></ul></div></div>`,
+            `<div class="sb-fieldBase__childWrapper flex items-center"><label class="floatLabel floatLabel--isInvalid color-red" aria-hidden="false" for="accountNumber"><span class="">* </span>Numéro de carte</label><input aria-describedby="accountNumber-validationHint" aria-invalid="true" aria-required="true" class="fieldInput text-sm" id="accountNumber" maxlength="19" type="password" name="accountNumber" autocomplete="off" minlength="19" inputmode="numeric" value=""><div aria-live="polite" class="hiddenVisually"></div><button aria-label="Masquer le Numéro de carte" class="mb1 color-textBlackSoft text-sm text-bold self-end px1" type="button"><svg aria-hidden="true" class="valign-middle " focusable="false" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" style="width: 24px; height: 24px; overflow: visible; fill: currentcolor;"><path d="M22.7666,12.0294463 C22.0125135,11.2099699 19.8884152,9.08797941 17.0977677,7.6916 L14.4874682,10.3008467 C14.8397268,10.8049777 15.0348401,11.4019193 15.0348401,12.0294463 C15.0348401,13.7032032 13.6732656,15.0647786 11.9995099,15.0647786 C11.3719834,15.0647786 10.7760968,14.8696652 10.2709116,14.5174063 L7.9517,16.8366195 C9.33225842,17.3924292 10.6917235,17.6909 11.9995099,17.6909 C17.1779223,17.6909 21.6011935,13.295047 22.7666,12.0294463 M13.7217084,11.0676 L11.0376,13.7517084 C11.3297407,13.9151806 11.6556305,14.0101 11.9994495,14.0101 C13.0920767,14.0101 13.9801,13.1220767 13.9801,12.0294495 C13.9801,11.6856305 13.8851806,11.3597407 13.7217084,11.0676 M23.8781861,12.3658587 C23.6619796,12.6263607 18.5088818,18.7455213 11.9994836,18.7455213 C10.4238127,18.7455213 8.79224449,18.3647876 7.14591096,17.6423428 L4.60838471,20.1809191 C4.50502745,20.2832215 4.37003021,20.3349 4.23503297,20.3349 C4.10003573,20.3349 3.96503849,20.2832215 3.86273589,20.1809191 C3.65602137,19.9742049 3.65602137,19.6409311 3.86273589,19.4342169 L16.6336857,6.66329032 C16.6389591,6.658017 16.6442324,6.65274368 16.6495057,6.64852502 L19.142736,4.15424461 C19.3483959,3.94858513 19.682725,3.94858513 19.8883848,4.15424461 C20.0940447,4.36095876 20.0940447,4.69423259 19.8883848,4.89989207 L17.8876836,6.90164438 C21.4144865,8.75574373 23.7727195,11.5664233 23.8781861,11.692983 C24.0406046,11.8880959 24.0406046,12.1707458 23.8781861,12.3658587 M10.0378313,11.7562456 C10.1601725,10.8713937 10.8636339,10.1763789 11.7484978,10.0645859 C12.0374759,10.0287278 12.2420809,9.76506513 12.2062223,9.47609085 C12.1703637,9.18711657 11.9151348,8.98462364 11.6166647,9.01837246 C10.259311,9.18922587 9.18038879,10.2554777 8.99265844,11.6117584 C8.95258118,11.8996781 9.15507683,12.1665047 9.44300035,12.2055267 C9.46725764,12.2097453 9.4925696,12.2108 9.51577222,12.2108 C9.77521978,12.2108 10.0009181,12.0199082 10.0378313,11.7562456 M5.18633767,16.5424 C5.09036274,16.5424 4.99227847,16.5160333 4.90579556,16.4622452 C2.04025831,14.6598169 0.198805216,12.4587239 0.121814337,12.3659131 C-0.0406047789,12.1707994 -0.0406047789,11.8881483 0.121814337,11.6930346 C0.338021601,11.4325315 5.49008251,5.3144 11.9995032,5.3144 C12.9972206,5.3144 14.0244688,5.46099891 15.054881,5.75314206 C15.3364777,5.83224219 15.4988969,6.12333068 15.4197966,6.40387248 C15.3396417,6.68335961 15.0464436,6.84577855 14.7690655,6.76773308 C13.8314642,6.50301131 12.900191,6.36906842 11.9995032,6.36906842 C6.82107553,6.36906842 2.39884597,10.7638717 1.23238141,12.0294738 C1.85252712,12.703407 3.39234471,14.2643162 5.46687978,15.568941 C5.71367246,15.7239773 5.78749933,16.0498698 5.63246291,16.2956076 C5.5322693,16.4559172 5.36141282,16.5424 5.18633767,16.5424"></path></svg></button></div>`,
+            `<span class="FlexedRowContainer-VDS__sc-1nnt7hu-10 gKrjow"><span class="FlexedColContainer-VDS__sc-1nnt7hu-11 dlcBSK"><span class="InputContainer-VDS__sc-1nnt7hu-3 iYyIFy" style=""><div class="CardIconContainer-VDS__sc-1nnt7hu-12 fWSJdX"><svg viewBox="0 0 34 12.98" width="100%" aria-hidden="false" role="img" aria-label="visa card"><title>visa card</title><path fill="#1434cb" d="M12.91,.19l-4.45,10.62h-2.9L3.36,2.34c-.13-.52-.25-.71-.65-.93-.66-.36-1.75-.69-2.71-.9L.07,.19H4.74c.6,0,1.13,.4,1.27,1.08l1.16,6.15L10.02,.19h2.89Zm11.38,7.15c.01-2.8-3.88-2.96-3.85-4.21,0-.38,.37-.79,1.17-.89,.39-.05,1.48-.09,2.71,.48l.48-2.25c-.66-.24-1.51-.47-2.57-.47-2.72,0-4.63,1.44-4.64,3.51-.02,1.53,1.36,2.38,2.4,2.89,1.07,.52,1.43,.85,1.43,1.32,0,.71-.85,1.03-1.65,1.04-1.38,.02-2.18-.37-2.82-.67l-.5,2.33c.64,.29,1.83,.55,3.06,.56,2.89,0,4.77-1.43,4.78-3.63m7.17,3.47h2.54L31.78,.19h-2.35c-.53,0-.97,.31-1.17,.78l-4.12,9.84h2.88l.57-1.59h3.52l.33,1.59Zm-3.07-3.76l1.45-3.99,.83,3.99h-2.28ZM16.83,.19l-2.27,10.62h-2.75L14.09,.19h2.75Z"></path></svg></div><div aria-live="off" class="InputWrapper-VDS__sc-1nnt7hu-9 bOeuNi"><input class="StyledInput-VDS__sc-1nnt7hu-5 lbxZgp contains-PII" maxlength="19" data-testid="cardNumber" aria-label="Card number*" aria-describedby="7237447c-db43-405f-a7ea-2cca27a308e1-error" id="7237447c-db43-405f-a7ea-2cca27a308e1" autocomplete="off" inputmode="numeric" data-cs-mask="true" pattern="[0-9]*" name="cardNumber_masked" aria-required="true" form="creditDebitForm" required="" aria-invalid="false" type="text" aria-hidden="false" value="• • • • • • • • • • • • 9040" style="background-color: transparent;"></div></span><span aria-live="polite" aria-atomic="true" class="ScreenReaderText-VDS__sc-1nnt7hu-1 iizYPU"></span></span></span>`,
+        ];
+        fieldTest(CCFieldType.NUMBER, samples);
+    });
+    describe("CCFieldType.CSC", () => {
+        const samples = [
+            `<input ($focusout)="focusout($element, %event)" ($input)="input($element, %event)" aria-describedby="" aria-invalid="false" aria-labelledby="idms-input-labelledby-1710841688481-1" aria-required="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="generic-input-field form-textbox form-textbox-text content-input cvv-number force-ltr placeholder-default-direction" data-fathom="cc-csc" id="input-1710841688481-1" maxlength="4" spellcheck="false" type="text" value="" {$aria-invalid}="hasErrors" {$aria-required}="isRequired" {$disabled}="disabled" {$type}="inputType" {($value)}="value" {input-handler}="inputHandler"/>`,
+            `<input _ngcontent-wrg-c49="" autocomplete="cc-csc" class="form-control ng-untouched ng-pristine ng-invalid" data-fathom="cc-csc" formcontrolname="cvv" id="cvv" inputmode="decimal" mask="0000" maxlength="4" name="cvv" type="tel" validate-onblur="" value=""/>`,
+            `<input aria-describedby="adyen-checkout-encryptedSecurityCode-1710844611188-ariaContext" aria-invalid="false" aria-label="Security code" aria-required="true" autocomplete="cc-csc" class="js-iframe-input input-field" data-fathom="cc-csc" data-fieldtype="encryptedSecurityCode" data-type="gsf" id="adyen-checkout-encryptedSecurityCode-1710844611188" inputmode="numeric" maxlength="4" placeholder="3 digits" style="display:block" type="text" value=""/>`,
+            `<input aria-describedby="adyen-checkout-encryptedSecurityCode-1710851944815-ariaError" aria-invalid="false" aria-label="Security code" aria-required="true" autocomplete="cc-csc" class="js-iframe-input input-field" data-fathom="cc-csc" data-fieldtype="encryptedSecurityCode" data-type="gsf" id="adyen-checkout-encryptedSecurityCode-1710851944815" inputmode="numeric" maxlength="4" placeholder="3 digits" style="display:block" type="text" value=""/>`,
+            `<input aria-describedby="adyen-checkout-encryptedSecurityCode-1710851944815-ariaError" aria-invalid="false" aria-label="Security code" aria-required="true" autocomplete="cc-csc" class="js-iframe-input input-field" data-fathom="cc-csc" data-fieldtype="encryptedSecurityCode" data-type="gsf" id="adyen-checkout-encryptedSecurityCode-1710851944815" inputmode="numeric" maxlength="4" placeholder="3 digits" style="display:block" type="text" value=""/>`,
+            `<input aria-describedby="adyen-checkout-encryptedSecurityCode-1710852060382-ariaError" aria-invalid="false" aria-label="Security code" aria-required="true" autocomplete="cc-csc" class="js-iframe-input input-field" data-fathom="cc-csc" data-fieldtype="encryptedSecurityCode" data-type="gsf" id="adyen-checkout-encryptedSecurityCode-1710852060382" inputmode="numeric" maxlength="4" placeholder="3 digits" style="display:block" type="text" value=""/>`,
+            `<input aria-describedby="ariaErrorField" aria-invalid="true" aria-label="Security code" aria-required="true" autocomplete="cc-csc" class="js-iframe-input input-field" data-fathom="cc-csc" data-type="gsf" id="encryptedSecurityCode" maxlength="4" placeholder="123" style="display:block" type="tel" value=""/>`,
+            `<input aria-describedby="ariaId_15" aria-labelledby="ariaId_16" aria-required="true" class="jfk-textinput b3id-text-input b3-text-input numeric label-input-label" data-fathom="cc-csc" data-was-visible="true" maxlength="3" name="cvc" style="width:80px" type="tel" value=""/>`,
+            `<input aria-describedby="error-cardSecurityCode" aria-required="true" class="text-input-cvv" data-fathom="cc-csc" encrypt="true" id="input-cardSecurityCode" maxlength="4" name="field_cardSecurityCode" type="text" value=""/>`,
+            `<input aria-describedby="error-cardSecurityCode" aria-required="true" class="text-input-cvv" data-fathom="cc-csc" encrypt="true" id="input-cardSecurityCode" maxlength="4" name="field_cardSecurityCode" type="text" value=""/>`,
+            `<input aria-describedby="error-cardSecurityCode" aria-required="true" class="text-input-cvv" data-fathom="cc-csc" encrypt="true" id="input-cardSecurityCode" maxlength="4" name="field_cardSecurityCode" type="text" value=""/>`,
+            `<input aria-describedby="error-cardSecurityCode" aria-required="true" class="text-input-cvv" data-fathom="cc-csc" encrypt="true" id="input-cardSecurityCode" maxlength="4" name="field_cardSecurityCode" type="text" value=""/>`,
+            `<input aria-describedby="error-cardSecurityCode" aria-required="true" class="text-input-cvv" data-fathom="cc-csc" encrypt="true" id="input-cardSecurityCode" maxlength="4" name="field_cardSecurityCode" type="text" value=""/>`,
+            `<input aria-describedby="error-cardSecurityCode" aria-required="true" class="text-input-cvv" data-fathom="cc-csc" encrypt="true" id="input-cardSecurityCode" maxlength="4" name="field_cardSecurityCode" type="text" value=""/>`,
+            `<input aria-describedby="error-cvc" aria-invalid="false" autocapitalize="off" autocomplete="cc-csc" autocorrect="off" class="input-element w-full px-3" data-fathom="cc-csc" data-testid="cvc" id="cvc" maxlength="4" name="cvc" placeholder="CVV" spellcheck="false" value=""/>`,
+            `<input aria-describedby="error-for-verification_value tooltip-for-verification_value" aria-invalid="false" autocomplete="cc-csc" class="input-placeholder-color--lvl-22" data-current-field="verification_value" data-fathom="cc-csc" id="verification_value" inputmode="numeric" name="verification_value" pattern="[0-9]*" placeholder="Code de sécurité" style='font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;letter-spacing:normal;line-height:1.5;color:rgb(0,0,0);text-decoration:none;text-transform:none;--placeholder-color:hsl(0,0%,44%);padding:calc((-1.5rem + max(2.35714rem,3.42857rem))/2) 0.785714rem;transition:padding 0.2s ease-out 0s' type="text" value=""/>`,
+            `<input aria-describedby="error-for-verification_value tooltip-for-verification_value" aria-invalid="false" autocomplete="cc-csc" class="input-placeholder-color--lvl-22" data-current-field="verification_value" data-fathom="cc-csc" id="verification_value" inputmode="numeric" name="verification_value" pattern="[0-9]*" placeholder="Security code" style="font-family:SuisseIntl,sans-serif;font-size:1rem;letter-spacing:normal;line-height:1.5;color:rgb(0,0,0);text-decoration:none;text-transform:none;--placeholder-color:rgba(0,0,0,0.56);padding:calc((-1.5rem + max(2.35714rem,3.42857rem))/2) 0.785714rem;transition:padding 0.2s ease-out 0s" type="text" value=""/>`,
+            `<input aria-describedby="error-for-verification_value tooltip-for-verification_value" aria-invalid="false" autocomplete="cc-csc" class="input-placeholder-color--lvl-22" data-current-field="verification_value" data-fathom="cc-csc" id="verification_value" inputmode="numeric" name="verification_value" pattern="[0-9]*" placeholder="Security code" style='font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;letter-spacing:normal;line-height:1.5;color:rgb(0,0,0);text-decoration:none;text-transform:none;--placeholder-color:hsl(0,0%,44%);padding:calc((-1.5rem + max(2.35714rem,3.42857rem))/2) 0.785714rem;transition:padding 0.2s ease-out 0s' type="text" value=""/>`,
+            `<input aria-describedby="error-for-verification_value tooltip-for-verification_value" aria-invalid="false" autocomplete="cc-csc" class="input-placeholder-color--lvl-22" data-current-field="verification_value" data-fathom="cc-csc" id="verification_value" inputmode="numeric" name="verification_value" pattern="[0-9]*" placeholder="Security code" style='font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;letter-spacing:normal;line-height:1.5;color:rgb(0,0,0);text-decoration:none;text-transform:none;--placeholder-color:hsl(0,0%,44%);padding:calc((-1.5rem + max(2.35714rem,3.42857rem))/2) 0.785714rem;transition:padding 0.2s ease-out 0s' type="text" value=""/>`,
+            `<input aria-describedby="field-description-cvv" aria-label="CVV" autocapitalize="none" autocomplete="cc-csc" autocorrect="off" class="CardInput is-empty" data-fathom="cc-csc" id="cvc" inputmode="numeric" maxlength="4" name="cvv" placeholder="CVC" spellcheck="false" type="tel" value=""/>`,
+            `<input aria-describedby="field-description-cvv" autocapitalize="none" autocomplete="cc-csc" autocorrect="off" class="cvv" data-braintree-name="cvv" data-fathom="cc-csc" id="cvv" inputmode="numeric" maxlength="4" name="cvv" pattern="\d*" placeholder="CVC" spellcheck="false" type="text" value=""/>`,
+            `<input aria-describedby="securityCode-field-message" aria-invalid="false" autocomplete="cc-csc" class="textbox__control textbox__control--fluid textbox__control--large" data-fathom="cc-csc" icons="VISA,MASTERCARD,AMEX" id="securityCode" name="securityCode" type="text" value=""/>`,
+            `<input aria-describedby="securityCode-field-message" aria-invalid="false" autocomplete="cc-csc" class="textbox__control textbox__control--fluid textbox__control--large" data-fathom="cc-csc" icons="VISA,MASTERCARD,AMEX" id="securityCode" name="securityCode" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="123" aria-placeholder="123" autocomplete="cc-csc" autocorrect="off" class="cvv field" data-fathom="cc-csc" id="checkout-frames-cvv" inputmode="numeric" name="cvc" placeholder="123" spellcheck="false" value=""/>`,
+            `<input aria-invalid="false" aria-label="CVC" autocomplete="cc-csc" autocorrect="off" class="CheckoutInput CheckoutInput--tabularnums Input Input--empty" data-1p-ignore="false" data-fathom="cc-csc" id="cardCvc" inputmode="numeric" name="cardCvc" placeholder="CVC" spellcheck="false" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="CVC" autocomplete="cc-csc" autocorrect="off" class="CheckoutInput CheckoutInput--tabularnums Input Input--empty" data-1p-ignore="false" data-fathom="cc-csc" id="cardCvc" inputmode="numeric" name="cardCvc" placeholder="CVC" spellcheck="false" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="CVV" autocomplete="cc-csc" autocorrect="off" class="sc-hIagIn bUpLMa sc-aaqME dbBmkJ" data-fathom="cc-csc" data-testid="cardVerificationValueInput" id="cvv" inputmode="numeric" maxlength="4" name="cvv" placeholder="CVV" spellcheck="false" style="padding-right:40px;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuNSA3QzAuNSA2LjE3MTU3IDEuMTcxNTcgNS41IDIgNS41SDI0QzI0LjgyODQgNS41IDI1LjUgNi4xNzE1NyAyNS41IDdWMjFDMjUuNSAyMS44Mjg0IDI0LjgyODQgMjIuNSAyNCAyMi41SDJDMS4xNzE1NyAyMi41IDAuNSAyMS44Mjg0IDAuNSAyMVY3WiIgZmlsbD0iI0U5RTlFOSIgc3Ryb2tlPSIjN0I3QjdCIi8+CjxyZWN0IHk9IjgiIHdpZHRoPSIyNiIgaGVpZ2h0PSI0IiBmaWxsPSIjN0I3QjdCIi8+CjxyZWN0IHg9IjMiIHk9IjE0IiB3aWR0aD0iMjEiIGhlaWdodD0iMiIgZmlsbD0iI0M0QzRDNCIvPgo8Y2lyY2xlIGN4PSIxOS41IiBjeT0iMTEuNSIgcj0iOCIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzdCN0I3QiIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI1LjUwMDUgMTZDMjYuNDQyMSAxNC43NDY1IDI3IDEzLjE4ODQgMjcgMTEuNUMyNyA5LjgxMTU5IDI2LjQ0MjEgOC4yNTM0OSAyNS41MDA1IDdIMTMuNDk5NUMxMi41NTc5IDguMjUzNDkgMTIgOS44MTE1OSAxMiAxMS41QzEyIDEzLjE4ODQgMTIuNTU3OSAxNC43NDY1IDEzLjQ5OTUgMTZIMjUuNTAwNVoiIGZpbGw9IiNFOUU5RTkiLz4KPHBhdGggZD0iTTE2LjY1MyAxMi44MjhWMTMuNUgxNC4xNjNWMTIuODI4SDE1LjAwM1YxMC42MjNDMTUuMDAzIDEwLjU2NyAxNS4wMDQgMTAuNTExIDE1LjAwNiAxMC40NTVDMTUuMDA4IDEwLjM5NyAxNS4wMTEgMTAuMzM5IDE1LjAxNSAxMC4yODFMMTQuNTE3IDEwLjY5NUMxNC40NzMgMTAuNzI5IDE0LjQyOSAxMC43NSAxNC4zODUgMTAuNzU4QzE0LjM0MyAxMC43NjQgMTQuMzAzIDEwLjc2NCAxNC4yNjUgMTAuNzU4QzE0LjIyNyAxMC43NSAxNC4xOTMgMTAuNzM3IDE0LjE2MyAxMC43MTlDMTQuMTMzIDEwLjY5OSAxNC4xMTEgMTAuNjc5IDE0LjA5NyAxMC42NTlMMTMuODAzIDEwLjI2OUwxNS4xNjUgOS4xMjZIMTUuOTMzVjEyLjgyOEgxNi42NTNaTTIwLjUwODUgMTIuNjZDMjAuNjA4NSAxMi42NiAyMC42ODc1IDEyLjY4OCAyMC43NDU1IDEyLjc0NEMyMC44MDM1IDEyLjc5OCAyMC44MzI1IDEyLjg3IDIwLjgzMjUgMTIuOTZWMTMuNUgxNy43NjA1VjEzLjJDMTcuNzYwNSAxMy4xNDIgMTcuNzcyNSAxMy4wOCAxNy43OTY1IDEzLjAxNEMxNy44MjA1IDEyLjk0OCAxNy44NjI1IDEyLjg4OCAxNy45MjI1IDEyLjgzNEwxOS4xODI1IDExLjU2NUMxOS4yOTA1IDExLjQ1NyAxOS4zODQ1IDExLjM1NCAxOS40NjQ1IDExLjI1NkMxOS41NDQ1IDExLjE1OCAxOS42MTA1IDExLjA2MiAxOS42NjI1IDEwLjk2OEMxOS43MTQ1IDEwLjg3MiAxOS43NTM1IDEwLjc3NyAxOS43Nzk1IDEwLjY4M0MxOS44MDU1IDEwLjU4NyAxOS44MTg1IDEwLjQ4NiAxOS44MTg1IDEwLjM4QzE5LjgxODUgMTAuMjA2IDE5Ljc3NjUgMTAuMDczIDE5LjY5MjUgOS45ODFDMTkuNjEwNSA5Ljg4NyAxOS40ODQ1IDkuODQgMTkuMzE0NSA5Ljg0QzE5LjE3NjUgOS44NCAxOS4wNTk1IDkuODc3IDE4Ljk2MzUgOS45NTFDMTguODY5NSAxMC4wMjMgMTguODA0NSAxMC4xMTMgMTguNzY4NSAxMC4yMjFDMTguNzI2NSAxMC4zMzEgMTguNjcxNSAxMC40MDQgMTguNjAzNSAxMC40NEMxOC41MzU1IDEwLjQ3NiAxOC40Mzg1IDEwLjQ4NCAxOC4zMTI1IDEwLjQ2NEwxNy44MjA1IDEwLjM3N0MxNy44NTI1IDEwLjE1OSAxNy45MTM1IDkuOTY5IDE4LjAwMzUgOS44MDdDMTguMDk1NSA5LjY0NSAxOC4yMDg1IDkuNTEgMTguMzQyNSA5LjQwMkMxOC40Nzg1IDkuMjk0IDE4LjYzMzUgOS4yMTQgMTguODA3NSA5LjE2MkMxOC45ODE1IDkuMTA4IDE5LjE2ODUgOS4wODEgMTkuMzY4NSA5LjA4MUMxOS41ODQ1IDkuMDgxIDE5Ljc3ODUgOS4xMTMgMTkuOTUwNSA5LjE3N0MyMC4xMjQ1IDkuMjM5IDIwLjI3MjUgOS4zMjYgMjAuMzk0NSA5LjQzOEMyMC41MTY1IDkuNTUgMjAuNjA5NSA5LjY4NCAyMC42NzM1IDkuODRDMjAuNzM5NSA5Ljk5NCAyMC43NzI1IDEwLjE2NCAyMC43NzI1IDEwLjM1QzIwLjc3MjUgMTAuNTEgMjAuNzQ5NSAxMC42NTggMjAuNzAzNSAxMC43OTRDMjAuNjU5NSAxMC45MyAyMC41OTg1IDExLjA2IDIwLjUyMDUgMTEuMTg0QzIwLjQ0MjUgMTEuMzA2IDIwLjM1MTUgMTEuNDI1IDIwLjI0NzUgMTEuNTQxQzIwLjE0NTUgMTEuNjU1IDIwLjAzNjUgMTEuNzcxIDE5LjkyMDUgMTEuODg5TDE5LjA2NTUgMTIuNzY1QzE5LjE3NTUgMTIuNzMxIDE5LjI4NDUgMTIuNzA1IDE5LjM5MjUgMTIuNjg3QzE5LjUwMDUgMTIuNjY5IDE5LjYwMDUgMTIuNjYgMTkuNjkyNSAxMi42NkgyMC41MDg1Wk0yMS45MjQ5IDEwLjM3N0MyMS45NTY5IDEwLjE1OSAyMi4wMTc5IDkuOTY5IDIyLjEwNzkgOS44MDdDMjIuMTk5OSA5LjY0NSAyMi4zMTI5IDkuNTEgMjIuNDQ2OSA5LjQwMkMyMi41ODI5IDkuMjk0IDIyLjczNzkgOS4yMTQgMjIuOTExOSA5LjE2MkMyMy4wODU5IDkuMTA4IDIzLjI3MjkgOS4wODEgMjMuNDcyOSA5LjA4MUMyMy42ODg5IDkuMDgxIDIzLjg4MDkgOS4xMTIgMjQuMDQ4OSA5LjE3NEMyNC4yMTY5IDkuMjM0IDI0LjM1ODkgOS4zMTYgMjQuNDc0OSA5LjQyQzI0LjU5MDkgOS41MjQgMjQuNjc4OSA5LjY0NSAyNC43Mzg5IDkuNzgzQzI0Ljc5ODkgOS45MTkgMjQuODI4OSAxMC4wNjMgMjQuODI4OSAxMC4yMTVDMjQuODI4OSAxMC4zNTMgMjQuODE0OSAxMC40NzUgMjQuNzg2OSAxMC41ODFDMjQuNzU4OSAxMC42ODUgMjQuNzE2OSAxMC43NzYgMjQuNjYwOSAxMC44NTRDMjQuNjA2OSAxMC45MyAyNC41Mzg5IDEwLjk5NSAyNC40NTY5IDExLjA0OUMyNC4zNzY5IDExLjEwMSAyNC4yODQ5IDExLjE0NSAyNC4xODA5IDExLjE4MUMyNC42NjQ5IDExLjM1MSAyNC45MDY5IDExLjY4MSAyNC45MDY5IDEyLjE3MUMyNC45MDY5IDEyLjQwMyAyNC44NjQ5IDEyLjYwNSAyNC43ODA5IDEyLjc3N0MyNC42OTY5IDEyLjk0OSAyNC41ODM5IDEzLjA5MiAyNC40NDE5IDEzLjIwNkMyNC4zMDE5IDEzLjMyIDI0LjEzODkgMTMuNDA2IDIzLjk1MjkgMTMuNDY0QzIzLjc2NjkgMTMuNTIgMjMuNTcyOSAxMy41NDggMjMuMzcwOSAxMy41NDhDMjMuMTYyOSAxMy41NDggMjIuOTc3OSAxMy41MjYgMjIuODE1OSAxMy40ODJDMjIuNjUzOSAxMy40MzYgMjIuNTA5OSAxMy4zNjYgMjIuMzgzOSAxMy4yNzJDMjIuMjU3OSAxMy4xNzYgMjIuMTQ2OSAxMy4wNTQgMjIuMDUwOSAxMi45MDZDMjEuOTU2OSAxMi43NTggMjEuODc0OSAxMi41ODIgMjEuODA0OSAxMi4zNzhMMjIuMjE4OSAxMi4yMUMyMi4zMjY5IDEyLjE2OCAyMi40MjY5IDEyLjE1NyAyMi41MTg5IDEyLjE3N0MyMi42MTA5IDEyLjE5NyAyMi42NzY5IDEyLjI0MyAyMi43MTY5IDEyLjMxNUMyMi44MDY5IDEyLjQ4MSAyMi45MDE5IDEyLjYwMiAyMy4wMDE5IDEyLjY3OEMyMy4xMDM5IDEyLjc1MiAyMy4yMjI5IDEyLjc4OSAyMy4zNTg5IDEyLjc4OUMyMy40NjI5IDEyLjc4OSAyMy41NTI5IDEyLjc3MiAyMy42Mjg5IDEyLjczOEMyMy43MDY5IDEyLjcwMiAyMy43NzA5IDEyLjY1NyAyMy44MjA5IDEyLjYwM0MyMy44NzI5IDEyLjU0NyAyMy45MTE5IDEyLjQ4NCAyMy45Mzc5IDEyLjQxNEMyMy45NjM5IDEyLjM0NCAyMy45NzY5IDEyLjI3MyAyMy45NzY5IDEyLjIwMUMyMy45NzY5IDEyLjEwNyAyMy45Njk5IDEyLjAyMyAyMy45NTU5IDExLjk0OUMyMy45NDM5IDExLjg3MyAyMy45MDc5IDExLjgwOCAyMy44NDc5IDExLjc1NEMyMy43ODc5IDExLjcgMjMuNjk2OSAxMS42NTkgMjMuNTc0OSAxMS42MzFDMjMuNDU0OSAxMS42MDEgMjMuMjg2OSAxMS41ODYgMjMuMDcwOSAxMS41ODZWMTAuOTQ0QzIzLjI1MjkgMTAuOTQ0IDIzLjM5OTkgMTAuOTMgMjMuNTExOSAxMC45MDJDMjMuNjIzOSAxMC44NzQgMjMuNzA5OSAxMC44MzYgMjMuNzY5OSAxMC43ODhDMjMuODMxOSAxMC43MzggMjMuODcyOSAxMC42NzggMjMuODkyOSAxMC42MDhDMjMuOTEyOSAxMC41MzggMjMuOTIyOSAxMC40NjEgMjMuOTIyOSAxMC4zNzdDMjMuOTIyOSAxMC4yMDUgMjMuODgwOSAxMC4wNzMgMjMuNzk2OSA5Ljk4MUMyMy43MTQ5IDkuODg3IDIzLjU4ODkgOS44NCAyMy40MTg5IDkuODRDMjMuMjgwOSA5Ljg0IDIzLjE2MzkgOS44NzcgMjMuMDY3OSA5Ljk1MUMyMi45NzM5IDEwLjAyMyAyMi45MDg5IDEwLjExMyAyMi44NzI5IDEwLjIyMUMyMi44MzA5IDEwLjMzMSAyMi43NzU5IDEwLjQwNCAyMi43MDc5IDEwLjQ0QzIyLjYzOTkgMTAuNDc2IDIyLjU0MjkgMTAuNDg0IDIyLjQxNjkgMTAuNDY0TDIxLjkyNDkgMTAuMzc3WiIgZmlsbD0iIzdCN0I3QiIvPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:right 11px center" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Credit or debit card CVC/CVV" autocomplete="cc-csc" autocorrect="off" class="InputElement is-empty Input Input--empty" data-elements-stable-field-name="cardCvc" data-fathom="cc-csc" inputmode="numeric" name="cvc" placeholder="CVC" spellcheck="false" tabindex="0" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Credit or debit card CVC/CVV" autocomplete="cc-csc" autocorrect="off" class="InputElement is-empty Input Input--empty" data-elements-stable-field-name="cardCvc" data-fathom="cc-csc" inputmode="numeric" name="cvc" placeholder="CVC" spellcheck="false" tabindex="0" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Credit or debit card CVC/CVV" autocomplete="cc-csc" autocorrect="off" class="InputElement is-empty Input Input--empty" data-elements-stable-field-name="cardCvc" data-fathom="cc-csc" inputmode="numeric" name="cvc" placeholder="CVV" spellcheck="false" tabindex="0" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-required="false" autocomplete="on" class="cn ci fi fk fj fc e0 e3 dv fd ex an ed go gp gq gr gs gt gy bm bn bo bp bl gv gw" data-fathom="cc-csc" data-testid="card-code" id="card-code" inputmode="numeric" name="card-code" placeholder="" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-required="true" autocomplete="billing cc-csc" class="p-Input-input Input Input--empty p-Input-input--textRight" data-fathom="cc-csc" dir="ltr" id="Field-cvcInput" inputmode="numeric" name="cvc" placeholder="CVC" style="padding-inline-end: 51.2px" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-required="true" autocomplete="billing cc-csc" class="p-Input-input Input Input--empty p-Input-input--textRight" data-fathom="cc-csc" dir="ltr" id="Field-cvcInput" inputmode="numeric" name="cvc" placeholder="CVC" style="padding-inline-end:51.2px" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-required="true" autocomplete="billing cc-csc" class="p-Input-input Input Input--empty p-Input-input--textRight" data-fathom="cc-csc" dir="ltr" id="Field-cvcInput" inputmode="numeric" name="cvc" placeholder="CVC" style="padding-inline-end:55.2px" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-required="true" autocomplete="billing cc-csc" class="p-Input-input Input Input--empty p-Input-input--textRight" data-fathom="cc-csc" dir="ltr" id="Field-cvcInput" inputmode="numeric" name="cvc" placeholder="CVC" style="padding-inline-end:55.2px" type="text" value=""/>`,
+            `<input aria-invalid="false" autocapitalize="off" autocomplete="off" autocorrect="off" class="form-control input-sm ng-scope ng-pristine ng-valid-maxlength ng-invalid ng-invalid-required" data-fathom="cc-csc" data-ng-attr-placeholder="{{ 'CardSecurityCodePlaceholder' | phrase }}" id="card-security" maxlength="5" name="card.security" ng-blur="sendCardGa(form['card.number'], form['card.month'], form['card.year'],form['card.security'])" ng-change="resetRemoteValidation(form['card.security']);triggerScreenReaderValidation(form['card.security']);" ng-maxlength="5" ng-model="card.security" ng-required="option.requireCard" ns-popover="" ns-popover-hide-on-inside-click="true" ns-popover-placement="top|right" ns-popover-plain="false" ns-popover-template="cardSecurityCodePopover.html" placeholder="CVC" required="" spellcheck="off" type="text" value=""/>`,
+            `<input aria-invalid="false" autocomplete="cc-csc" class="xo-member-19s4o06-text_input_control-text_body-text_input_control_with_icon_right-label_placeholder_shown_and_not_focused-text_body" data-fathom="cc-csc" data-ppui="true" data-testid="split-card-cvv" id="cardCvv" maxlength="3" minlength="3" name="cvc" placeholder=" " required="" type="text" value=""/>`,
+            `<input aria-invalid="false" autocomplete="cc-csc" class="xo-member-19s4o06-text_input_control-text_body-text_input_control_with_icon_right-label_placeholder_shown_and_not_focused-text_body" data-fathom="cc-csc" data-ppui="true" data-testid="split-card-cvv" id="cardCvv" maxlength="3" minlength="3" name="cvc" placeholder=" " required="" type="text" value=""/>`,
+            `<input aria-label="CVV" autocomplete="on" autocorrect="off" data-fathom="cc-csc" inputmode="numeric" maxlength="4" name="cvv" pattern="[0-9]*" placeholder="CVV" type="text" value=""/>`,
+            `<input autocapitalize="off" autocomplete="off" autocorrect="off" class="input-material__field input-cb-card-cvc idz_hide" data-fathom="cc-csc" id="cvc" name="cvc" placeholder="" step="1" type="tel" value=""/>`,
+            `<input autocomplete="off" autocorrect="off" class="styles__MaskedCVVInput-sc-zltd9a-13 kNPNip axiom-checkout-element-disabled" data-fathom="cc-csc" data-scrub="true" id="credit-card-cvv-input" inputmode="numeric" maxlength="3" name="credit-card-cvv-input" pattern="[0-9]*" type="text" value=""/>`,
+            `<input autocomplete="off" autocorrect="off" data-fathom="cc-csc" data-validate="" disabled="" id="rc-payment-scode" inputmode="numeric" maxlength="4" name="securityCode" pattern="[0-9]*" placeholder=" " type="text" value=""/>`,
+            `<input autocomplete="off" class="a-input-text a-form-normal a-width-small" data-fathom="cc-csc" id="pp-3XyMeN-26" maxlength="4" name="addCreditCardVerificationNumber" spellcheck="false" type="password" value=""/>`,
+            `<input autocomplete="off" class="a-input-text a-form-normal a-width-small" data-fathom="cc-csc" id="pp-4MEsHB-26" maxlength="4" name="addCreditCardVerificationNumber" spellcheck="false" type="password" value=""/>`,
+            `<input autocomplete="off" class="a-input-text a-form-normal a-width-small" data-fathom="cc-csc" id="pp-Ka9je1-26" maxlength="4" name="addCreditCardVerificationNumber" spellcheck="false" type="password" value=""/>`,
+            `<input autocomplete="off" class="a-input-text a-form-normal a-width-small" data-fathom="cc-csc" id="pp-v9rInZ-26" maxlength="4" name="addCreditCardVerificationNumber" spellcheck="false" type="password" value=""/>`,
+            `<input autocomplete="off" class="input-text wc-credit-card-form-card-cvc" data-fathom="cc-csc" id="eh_authorize_net_aim_card-card-cvc" name="eh_authorize_net_aim_card-card-cvc" placeholder="CVV" type="text" value=""/>`,
+            `<input autocomplete="off" data-fathom="cc-csc" id="Ecom_Payment_Card_Verification" maxlength="5" name="Ecom_Payment_Card_Verification" size="4" type="tel" value=""/>`,
+            `<input autocomplete="off" data-fathom="cc-csc" id="cvvid" inputmode="numeric" maxlength="3" name="vads_cvv" pattern="[0-9]*" size="3" type="text" value="" x-inputmode="numeric"/>`,
+            `<input autocomplete="off" data-fathom="cc-csc" id="cvvid" inputmode="numeric" maxlength="3" name="vads_cvv" pattern="[0-9]*" size="3" type="text" value="" x-inputmode="numeric"/>`,
+            `<input autocomplete="off" data-fathom="cc-csc" id="cvvid" inputmode="numeric" maxlength="4" name="vads_cvv" pattern="[0-9]*" size="3" type="text" value="" x-inputmode="numeric"/>`,
+            `<input class="comet-input" data-fathom="cc-csc" data-meta="Field" direction="ltr" id="cvv" label="CVV" placeholder="" type="text" value=""/>`,
+            `<input class="form-control" data-fathom="cc-csc" name="cvc" pattern="\d{3,4}" placeholder="CVC" required="" type="tel" value=""/>`,
+            `<input class="pl-input pl-hidden sf-hidden" data-fathom="cc-csc" id="pl-pm-cards_5-styleOfIframe-cvv" placeholder="CVV" placeholder-color="transparent" type="tel" value=""/>`,
+            `<div class="form-control form-control_error form-control_large payment-method-form--cvv"><label><span class="form-control--label">CVV <span class="form-control--required" aria-hidden="true"> *</span> </span><div><div class="input input_error input_icon input_left input_primary"><input autocapitalize="none" autocomplete="section-billing billing cc-csc" autocorrect="off" id="creditCardNewVerificationValue" maxlength="4" spellcheck="false" aria-required="true" class="input--text" type="text" value="" aria-invalid="true"><span class="swa-icon swa-icon_small input--icon input--icon_error swa-icon_error" icon="swa-icon_error" role="presentation"><span role="presentation" class="swa-icon--icon"></span></span></div></div><div class="form-control--errors"><div class="form-control--error swa-g-error">Enter CVV.</div></div></label></div>`,
+            `<div class="control-input-wrapper"><input class="control-input__with-icon tether-target tether-abutted tether-abutted-left tether-element-attached-top tether-element-attached-left tether-target-attached-bottom tether-target-attached-left" id="x-text-control-input-cvv" name="cvv" type="text" autocomplete="cc-csc" placeholder="" inputmode="numeric" value=""><x-control-icon class="i control-icon i-lock"></x-control-icon><span class="i control-success sf-hidden"></span><x-control-preloader></x-control-preloader></div>`,
+            `<input name="cvc2" id="cvc2" maxlength="3" tabindex="1" placeholder="123" type="tel" class="exp-input numberOnly" style="min-width:100%" value="">`,
+            `<div class="input-form-group"><input id="security-code" autocomplete="off" type="tel" pattern="[0-9]*" placeholder=" " data-encrypted-name="cvc" aria-describedby="security-code-error" value=""><label id="trans-security_code" for="security-code">Security code</label><span class="contain-tooltip" data-tooltip="" data-lang="cvc_info"></span><p id="security-code-error" class="field-error sf-hidden" aria-live="assertive"></p></div>`,
+            `<div class="cvv-input"><label class="mdc-text-field mdc-text-field--outlined cvv-input-field action-input mdc-text-field--invalid"><span class="mdc-notched-outline mdc-notched-outline--upgraded"><span class="mdc-notched-outline__leading sf-hidden"></span><span class="mdc-notched-outline__notch"><span class="mdc-floating-label mdc-floating-label--required" id="cvv-label">Security Code</span></span><span class="mdc-notched-outline__trailing"></span></span><input type="text" pattern="\d*" inputmode="numeric" class="mdc-text-field__input" required="" maxlength="4" aria-labelledby="cvv-label" aria-controls="cvv-helper-msg" value=""><span class="clear-button" tabindex="0" role="button" aria-label="Clear Text Security Code" data-msg-cleared="Text Cleared" style="display:none"></span></label><div class="mdc-text-field-helper-line custom-helper-line"><div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg custom-helper-validation-msg" role="alert"><i class="error-icon"></i><span class="cvv-error-text" data-msg-required="Please enter the security code." data-msg-invalid="The CVV must have {nbRequiredDigits} digits">Please enter the security code.</span></div><div id="cvv-helper-msg" class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent custom-helper-msg cvv-helper-msg" data-helper-msg-back="The {nbRequiredDigits} digits can be found on the back of the card" data-helper-msg-front="The {nbRequiredDigits} digits can be found on the front of the card" style="display:none">The 3 digits can be found on the back of the card</div></div></div>`,
+            `<div class="cvv-control"><input autocomplete="new-password" required="" maxlength="5" name="cardInfo[cvv]" placeholder="" type="password" id="cvv" class="form-control"><i class="im-cvvlogo-icon img-icon-sm"></i></div>`,
+            `<span class="input__fifty-fifty wag-checkout-cvv-field"><span class="input__contain input__has-icon" style=""><input name="cvv" type="password" inputmode="numeric" id="wag-checkout-shipping-info-cvv" data-testid="add-card-cvv" autocomplete="off" title="Please fill out this field" placeholder="Enter number" aria-label="Security code (CVV)" maxlength="3" required="" style=""><label class="input__title" for="wag-checkout-shipping-info-cvv" style="">*Security code (CVV)</label><div class="icon-floating"><a href="javascript:void(0)" aria-label="CVV help Information - opens a simulated dialog"><span class="icon icon_lsg icon__question-mark"><svg aria-hidden="true" focusable="false"><symbol id="icon__question-mark" viewBox="0 0 32 32"><path d="M16 30.545c-8.029 0-14.545-6.516-14.545-14.545s6.516-14.545 14.545-14.545 14.545 6.516 14.545 14.545-6.516 14.545-14.545 14.545zM16 3.898c-6.662 0-12.102 5.44-12.102 12.102s5.44 12.102 12.102 12.102 12.102-5.44 12.102-12.102-5.44-12.102-12.102-12.102z"></path><path d="M17.251 22.196c0 0.739-0.599 1.338-1.338 1.338s-1.338-0.599-1.338-1.338c0-0.739 0.599-1.338 1.338-1.338s1.338 0.599 1.338 1.338z"></path><path d="M15.942 19.171c-0.727 0-1.338-0.611-1.338-1.338v-0.756c0-0.727 0.32-1.484 0.902-2.065 0.32-0.32 0.669-0.553 1.076-0.698l0.058-0.029c0.611-0.233 1.018-0.844 1.018-1.513 0-0.902-0.727-1.629-1.629-1.629s-1.629 0.727-1.629 1.629c0 0.727-0.611 1.338-1.338 1.338s-1.338-0.611-1.338-1.338c0-2.385 1.92-4.305 4.305-4.305s4.305 1.92 4.305 4.305c0 1.775-1.047 3.345-2.705 3.985l-0.087 0.029c-0.029 0-0.087 0.029-0.145 0.116-0.087 0.087-0.116 0.145-0.116 0.175v0.756c0 0.727-0.611 1.338-1.338 1.338z"></path></symbol><use href="#icon__question-mark"></use></svg></span></a></div></span></span>`,
+            `<div class="form-group required dwfrm_billing_creditCardFields_securityCode"> <label id="creditcardform-label-securityCode" class="form-control-label" for="securityCode"> Sicherheitscode <button type="button" class="info-icon form-control-description"<span class="sr-only">Hilfe</span> <span class="tooltip d-none sf-hidden"> Bitte gib den Sicherheitscode (CVV) auf der Rückseite deiner Karte ein. </span> </button> </label> <input type="text" class="form-control securityCode" id="securityCode" inputmode="numeric" name="dwfrm_billing_creditCardFields_securityCode" required="" aria-required="true" value="" maxlength="4" pattern="^[0-9]{3,4}$" aria-describedby="securityCodeInvalidMessage" sd_sf="qdj-34"> <div class="invalid-feedback sf-hidden" id="securityCodeInvalidMessage"></div> </div>`,
+            `<input type="text" class="form-control securityCode" id="securityCode" inputmode="numeric" name="dwfrm_billing_creditCardFields_securityCode" required="" aria-required="true" value="" maxlength="4" pattern="^[0-9]{3,4}$" aria-describedby="securityCodeInvalidMessage" sd_sf="qdj-34">`,
+            `<div class="text is-valid" id="divCVVNumberField"><input class="text__input" type="tel" id="txtCVV" name="cvv" autocomplete="cc-csc" required="" inputmode="text" value=""><label class="text__placeholder is-visible" for="cvv">CVV <span class="rq-i">*</span></label></div>`,
+            `<div class="InputField-ds__formControls"><input class="InputField-ds__input InputField-ds__input--active" id="cvv-7cc7ba3351d8d" autocomplete="cc-csc" spellcheck="true" aria-label="Security code" type="tel" value="***" name="cvv" data-gtm-form-interact-field-id="20" maxlength="3"><div class="InputField-ds__actions"><div class="InputField-ds__icon"><svg class="pal-c-Icon pal-c-Icon--size-default" aria-hidden="true" focusable="false" role="img" height="12" width="12" viewBox="0 0 194 121" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title-creditcardbackview"><title id="title-creditcardbackview">MC Security code</title><rect fill="#ccc" width="194" height="121" ry="5"></rect><rect fill="#999a9d" y="19.47" width="194" height="25.32"></rect><rect fill="#fff" y="76.46" width="114" height="18.32"></rect><rect fill="#fff" x="149.99" y="76.46" width="24.01" height="18.32"></rect><ellipse fill="none" stroke="#cb2026" cx="162.85" cy="85.86" rx="27.8" ry="17.67"></ellipse></svg></div></div></div>`,
+            `<div class="kib-input-text__field"><input id="gift-card-pin-textbox" class="kib-input-text__control" aria-errormessage="gift-card-pin-textbox-error" type="tel" name="giftCardPin" data-testid="gift-card-pin-field" aria-describedby="gift-card-pin-textbox-error" value=""><span class="kib-input-text__outline" role="presentation"></span><label for="gift-card-pin-textbox" class="kib-input-text__label"><span class="kib-input-text__label-content">8-Digit PIN</span></label></div>`,
+            `<div class="unzerInput"><input id="card-ccv" type="tel" pattern="\d*" maxlength="3" placeholder="123" autocorrect="off" spellcheck="false" style="display: block;"></div>`,
+            `<div class="text is-valid" id="divCVVNumberField"><input class="text__input" type="text" id="txtCVV" name="cvv" autocomplete="one-time-code" required="" inputmode="numeric" pattern="[0-9]*" data-form-type="other" data-lpignore="true" maxlength="3" value=""><label class="text__placeholder is-visible" for="cvv">CVV <span class="rq-i">*</span></label></div>`,
+            `<div class="sb-fieldBase__childWrapper flex items-center"><label class="floatLabel floatLabel--isInvalid color-red" aria-hidden="false" for="cvn"><span class="">* </span>Security code</label><input aria-describedby="cvn-validationHint" aria-invalid="true" aria-required="true" class="fieldInput text-sm" id="cvn" maxlength="3" type="password" name="cvn" autocomplete="off" minlength="3" inputmode="numeric" value=""><div aria-live="polite" class="hiddenVisually"></div><button aria-label="Hide Security code" class="mb1 color-textBlackSoft text-sm text-bold self-end px1" type="button"><svg aria-hidden="true" class="valign-middle " focusable="false" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" style="width: 24px; height: 24px; overflow: visible; fill: currentcolor;"><path d="M22.7666,12.0294463 C22.0125135,11.2099699 19.8884152,9.08797941 17.0977677,7.6916 L14.4874682,10.3008467 C14.8397268,10.8049777 15.0348401,11.4019193 15.0348401,12.0294463 C15.0348401,13.7032032 13.6732656,15.0647786 11.9995099,15.0647786 C11.3719834,15.0647786 10.7760968,14.8696652 10.2709116,14.5174063 L7.9517,16.8366195 C9.33225842,17.3924292 10.6917235,17.6909 11.9995099,17.6909 C17.1779223,17.6909 21.6011935,13.295047 22.7666,12.0294463 M13.7217084,11.0676 L11.0376,13.7517084 C11.3297407,13.9151806 11.6556305,14.0101 11.9994495,14.0101 C13.0920767,14.0101 13.9801,13.1220767 13.9801,12.0294495 C13.9801,11.6856305 13.8851806,11.3597407 13.7217084,11.0676 M23.8781861,12.3658587 C23.6619796,12.6263607 18.5088818,18.7455213 11.9994836,18.7455213 C10.4238127,18.7455213 8.79224449,18.3647876 7.14591096,17.6423428 L4.60838471,20.1809191 C4.50502745,20.2832215 4.37003021,20.3349 4.23503297,20.3349 C4.10003573,20.3349 3.96503849,20.2832215 3.86273589,20.1809191 C3.65602137,19.9742049 3.65602137,19.6409311 3.86273589,19.4342169 L16.6336857,6.66329032 C16.6389591,6.658017 16.6442324,6.65274368 16.6495057,6.64852502 L19.142736,4.15424461 C19.3483959,3.94858513 19.682725,3.94858513 19.8883848,4.15424461 C20.0940447,4.36095876 20.0940447,4.69423259 19.8883848,4.89989207 L17.8876836,6.90164438 C21.4144865,8.75574373 23.7727195,11.5664233 23.8781861,11.692983 C24.0406046,11.8880959 24.0406046,12.1707458 23.8781861,12.3658587 M10.0378313,11.7562456 C10.1601725,10.8713937 10.8636339,10.1763789 11.7484978,10.0645859 C12.0374759,10.0287278 12.2420809,9.76506513 12.2062223,9.47609085 C12.1703637,9.18711657 11.9151348,8.98462364 11.6166647,9.01837246 C10.259311,9.18922587 9.18038879,10.2554777 8.99265844,11.6117584 C8.95258118,11.8996781 9.15507683,12.1665047 9.44300035,12.2055267 C9.46725764,12.2097453 9.4925696,12.2108 9.51577222,12.2108 C9.77521978,12.2108 10.0009181,12.0199082 10.0378313,11.7562456 M5.18633767,16.5424 C5.09036274,16.5424 4.99227847,16.5160333 4.90579556,16.4622452 C2.04025831,14.6598169 0.198805216,12.4587239 0.121814337,12.3659131 C-0.0406047789,12.1707994 -0.0406047789,11.8881483 0.121814337,11.6930346 C0.338021601,11.4325315 5.49008251,5.3144 11.9995032,5.3144 C12.9972206,5.3144 14.0244688,5.46099891 15.054881,5.75314206 C15.3364777,5.83224219 15.4988969,6.12333068 15.4197966,6.40387248 C15.3396417,6.68335961 15.0464436,6.84577855 14.7690655,6.76773308 C13.8314642,6.50301131 12.900191,6.36906842 11.9995032,6.36906842 C6.82107553,6.36906842 2.39884597,10.7638717 1.23238141,12.0294738 C1.85252712,12.703407 3.39234471,14.2643162 5.46687978,15.568941 C5.71367246,15.7239773 5.78749933,16.0498698 5.63246291,16.2956076 C5.5322693,16.4559172 5.36141282,16.5424 5.18633767,16.5424"></path></svg></button></div>`,
+            `<div data-testid="test-container" class="StyledContainer-VDS__sc-1nnt7hu-2 ifooRk"><label data-testid="test-label" id="80e5ad3d-c245-4773-8e77-1ea555ff7906-label" label="Security code*" for="80e5ad3d-c245-4773-8e77-1ea555ff7906" class="LabelWrapper-VDS__sc-13hvypf-0 ioqEzv"><p id="80e5ad3d-c245-4773-8e77-1ea555ff7906-label-text" aria-hidden="false" class="StyledTypography-VDS__sc-15sxhse-0 bMDKrk StyledBody-VDS__sc-1x4uqr-0 bORdrY">Security code*<span class="AlignTooltip-VDS__sc-13hvypf-5 lfaqCh"><span class="TooltipWrapper-VDS__sc-yvzd18-0 kHiLsi" tabindex="-1" id="99fd8368-4c5d-4eda-a546-f42de0174271-tooltipWrapper"><span tabindex="-1" class="TooltipIconWrapper-VDS__sc-yvzd18-1 fpYkKe"><span data-testid="tooltip" class="AnchorIconWrapper-VDS__sc-yvzd18-5 iqQnsn" id="99fd8368-4c5d-4eda-a546-f42de0174271"><span style="outline: none; display: inline-flex;"><span kind="ghost" class="ButtonIconContainer-VDS__sc-1tkw8xt-0 dwvZiF"><button aria-expanded="false" kind="ghost" role="button" tabindex="0" aria-label="Security code* tooltip" aria-disabled="false" aria-hidden="false" type="button" class="StyledButton-VDS__sc-1tkw8xt-2 hSZgUF"><span class="HitArea-VDS__sc-1tkw8xt-7 gGpgAG"></span><span class="IconContainer-VDS__sc-1tkw8xt-5 kJcJET"><svg role="img" aria-hidden="false" aria-label="info icon" viewBox="0 0 21.6 21.6" fill="#000000" class="StyledSVG-VDS__sc-3zla24-0 hbgDUu"><path class="cls-1" d="M19.8,10.8a9,9,0,1,0-9,9A9.01054,9.01054,0,0,0,19.8,10.8Zm-1.12488,0A7.87513,7.87513,0,1,1,10.8,2.92486,7.88411,7.88411,0,0,1,18.67509,10.8ZM11.625,7.45852H9.95v-1.675h1.675ZM9.95834,9.11662H11.65v6.6999H9.95834Z"></path></svg></span></button></span></span></span><span class="HoverZone-VDS__sc-yvzd18-3 gQeeRB"></span><span aria-live="assertive" aria-relevant="all"></span></span></span></span></p></label><span class="FlexedRowContainer-VDS__sc-1nnt7hu-10 gKrjow"><span class="FlexedColContainer-VDS__sc-1nnt7hu-11 dlcBSK"><span class="InputContainer-VDS__sc-1nnt7hu-3 dCwNNh"><div aria-live="off" class="InputWrapper-VDS__sc-1nnt7hu-9 bOeuNi"><input class="StyledInput-VDS__sc-1nnt7hu-5 jWDbHb contains-PII" maxlength="4" data-testid="security-Input" aria-label="Security code" aria-describedby="80e5ad3d-c245-4773-8e77-1ea555ff7906-error" id="80e5ad3d-c245-4773-8e77-1ea555ff7906" autocomplete="off" inputmode="numeric" data-cs-mask="true" name="securityCode_masked" pattern="[0-9]*" aria-required="true" form="creditDebitForm" required="" aria-invalid="false" type="password" aria-hidden="false" value="•••"></div></span><span aria-live="polite" aria-atomic="true" class="ScreenReaderText-VDS__sc-1nnt7hu-1 iizYPU"></span></span></span></div>`,
+        ];
+        fieldTest(CCFieldType.CSC, samples);
+    });
+    describe("CCFieldType.EXP", () => {
+        const samples = [
+            `<input ($focusout)="focusout($element, %event)" ($input)="attr('value', $element.val())" ($keyup)="input($element, %event)" aria-required="true" autocapitalize="off" autocorrect="off" class="form-input cc-expiration-date input-1710841688478-1 form-textbox form-textbox-text date date-input generic-input-field" data-fathom="cc-exp" errors="{errors}" id="input-1710841688478-1" spellcheck="false" type="text" value="" {$aria-required}="isRequired" {$value}="value" {^has-errors}="hasErrors"/>`,
+            `<input aria-describedby="adyen-checkout-encryptedExpiryDate-1710844611187-ariaContext" aria-invalid="false" aria-label="Expiry date" aria-required="true" autocomplete="cc-exp" class="js-iframe-input input-field" data-fathom="cc-exp" data-fieldtype="encryptedExpiryDate" data-type="gsf" id="adyen-checkout-encryptedExpiryDate-1710844611187" inputmode="numeric" maxlength="5" placeholder="MM/YY" style="display:block" type="text" value=""/>`,
+            `<input aria-describedby="adyen-checkout-encryptedExpiryDate-1710851944814-ariaError" aria-invalid="false" aria-label="Expiry date" aria-required="true" autocomplete="cc-exp" class="js-iframe-input input-field" data-fathom="cc-exp" data-fieldtype="encryptedExpiryDate" data-type="gsf" id="adyen-checkout-encryptedExpiryDate-1710851944814" inputmode="numeric" maxlength="5" placeholder="MM/YY" style="display:block" type="text" value=""/>`,
+            `<input aria-describedby="adyen-checkout-encryptedExpiryDate-1710851944814-ariaError" aria-invalid="false" aria-label="Expiry date" aria-required="true" autocomplete="cc-exp" class="js-iframe-input input-field" data-fathom="cc-exp" data-fieldtype="encryptedExpiryDate" data-type="gsf" id="adyen-checkout-encryptedExpiryDate-1710851944814" inputmode="numeric" maxlength="5" placeholder="MM/YY" style="display:block" type="text" value=""/>`,
+            `<input aria-describedby="adyen-checkout-encryptedExpiryDate-1710852060381-ariaError" aria-invalid="false" aria-label="Expiry date" aria-required="true" autocomplete="cc-exp" class="js-iframe-input input-field" data-fathom="cc-exp" data-fieldtype="encryptedExpiryDate" data-type="gsf" id="adyen-checkout-encryptedExpiryDate-1710852060381" inputmode="numeric" maxlength="5" placeholder="MM/YY" style="display:block" type="text" value=""/>`,
+            `<input aria-describedby="ariaErrorField" aria-invalid="true" aria-label="Expiry date" aria-required="true" autocomplete="cc-exp" class="js-iframe-input input-field" data-fathom="cc-exp" data-type="gsf" id="encryptedExpiryDate" maxlength="5" placeholder="MM/AA" style="display:block" type="tel" value=""/>`,
+            `<input aria-describedby="error-exp" aria-invalid="false" autocapitalize="off" autocomplete="cc-exp" autocorrect="off" class="input-element w-full px-3" data-fathom="cc-exp" data-testid="exp" id="exp" maxlength="5" placeholder="MM/YY" spellcheck="false" value=""/>`,
+            `<input aria-describedby="error-for-expiry tooltip-for-expiry" aria-invalid="false" autocomplete="cc-exp" class="input-placeholder-color--lvl-22" data-current-field="expiry" data-fathom="cc-exp" id="expiry" inputmode="numeric" name="expiry" pattern="[0-9]*" placeholder="Date d'expiration (MM/AA)" required="" style='font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;letter-spacing:normal;line-height:1.5;color:rgb(0,0,0);text-decoration:none;text-transform:none;--placeholder-color:hsl(0,0%,44%);padding:calc((-1.5rem + max(2.35714rem,3.42857rem))/2) 0.785714rem;transition:padding 0.2s ease-out 0s' type="text" value=""/>`,
+            `<input aria-describedby="error-for-expiry tooltip-for-expiry" aria-invalid="false" autocomplete="cc-exp" class="input-placeholder-color--lvl-22" data-current-field="expiry" data-fathom="cc-exp" id="expiry" inputmode="numeric" name="expiry" pattern="[0-9]*" placeholder="Expiration date (MM / YY)" required="" style="font-family:SuisseIntl,sans-serif;font-size:1rem;letter-spacing:normal;line-height:1.5;color:rgb(0,0,0);text-decoration:none;text-transform:none;--placeholder-color:rgba(0,0,0,0.56);padding:calc((-1.5rem + max(2.35714rem,3.42857rem))/2) 0.785714rem;transition:padding 0.2s ease-out 0s" type="text" value=""/>`,
+            `<input aria-describedby="error-for-expiry tooltip-for-expiry" aria-invalid="false" autocomplete="cc-exp" class="input-placeholder-color--lvl-22" data-current-field="expiry" data-fathom="cc-exp" id="expiry" inputmode="numeric" name="expiry" pattern="[0-9]*" placeholder="Expiration date (MM / YY)" required="" style='font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;letter-spacing:normal;line-height:1.5;color:rgb(0,0,0);text-decoration:none;text-transform:none;--placeholder-color:hsl(0,0%,44%);padding:calc((-1.5rem + max(2.35714rem,3.42857rem))/2) 0.785714rem;transition:padding 0.2s ease-out 0s' type="text" value=""/>`,
+            `<input aria-describedby="error-for-expiry tooltip-for-expiry" aria-invalid="false" autocomplete="cc-exp" class="input-placeholder-color--lvl-22" data-current-field="expiry" data-fathom="cc-exp" id="expiry" inputmode="numeric" name="expiry" pattern="[0-9]*" placeholder="Expiration date (MM / YY)" required="" style='font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;letter-spacing:normal;line-height:1.5;color:rgb(0,0,0);text-decoration:none;text-transform:none;--placeholder-color:hsl(0,0%,44%);padding:calc((-1.5rem + max(2.35714rem,3.42857rem))/2) 0.785714rem;transition:padding 0.2s ease-out 0s' type="text" value=""/>`,
+            `<input aria-describedby="expirationDate-field-message" aria-invalid="false" autocomplete="cc-exp" class="textbox__control textbox__control--fluid textbox__control--large" data-fathom="cc-exp" id="expirationDate" maxlength="7" name="expirationDate" type="text" value=""/>`,
+            `<input aria-describedby="expirationDate-field-message" aria-invalid="false" autocomplete="cc-exp" class="textbox__control textbox__control--fluid textbox__control--large" data-fathom="cc-exp" id="expirationDate" maxlength="7" name="expirationDate" type="text" value=""/>`,
+            `<input aria-describedby="field-description-expirationDate" autocapitalize="none" autocomplete="cc-exp" autocorrect="off" class="expirationDate" data-braintree-name="expirationDate" data-fathom="cc-exp" id="expiration" inputmode="numeric" maxlength="9" name="expiration" pattern="\d*" placeholder="MM/YY" spellcheck="false" type="text" value=""/>`,
+            `<input aria-describedby="field-description-expiry" aria-label="Expiry" autocapitalize="none" autocomplete="cc-exp" autocorrect="off" class="CardInput is-empty" data-fathom="cc-exp" id="exp-date" inputmode="numeric" maxlength="7" name="cardnumber-expiry" placeholder="MM/YY" spellcheck="false" type="tel" value=""/>`,
+            `<input aria-disabled="false" aria-label="Expiry date, 2-digit month, 2-digit year" autocomplete="off" class="whsOnd zHQkBf" data-fathom="cc-exp" data-initial-value="" inputmode="numeric" jsname="YPqjbf" tabindex="0" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Credit or debit card expiration date" autocomplete="cc-exp" autocorrect="off" class="InputElement is-empty Input Input--empty" data-elements-stable-field-name="cardExpiry" data-fathom="cc-exp" inputmode="numeric" name="exp-date" placeholder="MM / YY" spellcheck="false" tabindex="0" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Credit or debit card expiration date" autocomplete="cc-exp" autocorrect="off" class="InputElement is-empty Input Input--empty" data-elements-stable-field-name="cardExpiry" data-fathom="cc-exp" inputmode="numeric" name="exp-date" placeholder="MM / YY" spellcheck="false" tabindex="0" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Credit or debit card expiry date" autocomplete="cc-exp" autocorrect="off" class="InputElement is-empty Input Input--empty" data-elements-stable-field-name="cardExpiry" data-fathom="cc-exp" inputmode="numeric" name="exp-date" placeholder="MM / YY" spellcheck="false" tabindex="0" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Credit or debit card expiry date" autocomplete="cc-exp" autocorrect="off" class="InputElement is-empty Input Input--empty" data-elements-stable-field-name="cardExpiry" data-fathom="cc-exp" inputmode="numeric" name="exp-date" placeholder="MM / YY" spellcheck="false" tabindex="0" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Credit or debit card expiry date" autocomplete="cc-exp" autocorrect="off" class="InputElement is-empty Input Input--empty" data-elements-stable-field-name="cardExpiry" data-fathom="cc-exp" inputmode="numeric" name="exp-date" placeholder="MM / YY" spellcheck="false" tabindex="0" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Expiration" autocomplete="cc-exp" autocorrect="off" class="CheckoutInput CheckoutInput--tabularnums Input Input--empty" data-1p-ignore="false" data-fathom="cc-exp" id="cardExpiry" inputmode="numeric" name="cardExpiry" placeholder="MM / YY" spellcheck="false" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Expiration" autocomplete="cc-exp" autocorrect="off" class="CheckoutInput CheckoutInput--tabularnums Input Input--empty" data-1p-ignore="false" data-fathom="cc-exp" id="cardExpiry" inputmode="numeric" name="cardExpiry" placeholder="MM / YY" spellcheck="false" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Expiry" autocomplete="cc-exp" autocorrect="off" class="sc-hIagIn bUpLMa sc-iRFsWr eFvTJT" data-fathom="cc-exp" data-testid="expiryDateField" id="expiry" inputmode="numeric" name="expiry" placeholder="MM / YY" spellcheck="false" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="MM/AA" aria-placeholder="MM/AA" autocomplete="cc-exp" autocorrect="off" class="expiry-date field" data-fathom="cc-exp" id="checkout-frames-expiry-date" inputmode="numeric" name="exp-date" placeholder="MM/AA" spellcheck="false" value=""/>`,
+            `<input aria-invalid="false" aria-required="false" autocomplete="on" class="cn ci fi fk fj fc e0 e3 dv fd ex an ed go gp gq gr gs gt gy bm bn bo bp bl gv gw" data-fathom="cc-exp" data-testid="card-expiration" id="card-expiration" inputmode="numeric" name="card-expiration" placeholder="MM/YY" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-required="true" autocomplete="billing cc-exp" class="p-Input-input Input Input--empty p-Input-input--textRight" data-fathom="cc-exp" dir="ltr" id="Field-expiryInput" inputmode="numeric" name="expiry" placeholder="MM / AA" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-required="true" autocomplete="billing cc-exp" class="p-Input-input Input Input--empty p-Input-input--textRight" data-fathom="cc-exp" dir="ltr" id="Field-expiryInput" inputmode="numeric" name="expiry" placeholder="MM / AA" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-required="true" autocomplete="billing cc-exp" class="p-Input-input Input Input--empty p-Input-input--textRight" data-fathom="cc-exp" dir="ltr" id="Field-expiryInput" inputmode="numeric" name="expiry" placeholder="MM / YY" type="text" value=""/>`,
+            `<input aria-invalid="false" aria-required="true" autocomplete="billing cc-exp" class="p-Input-input Input Input--empty p-Input-input--textRight" data-fathom="cc-exp" dir="ltr" id="Field-expiryInput" inputmode="numeric" name="expiry" placeholder="MM / YY" type="text" value=""/>`,
+            `<input aria-invalid="false" autocomplete="cc-exp" class="xo-member-16mpn99-text_input_control-text_body-label_placeholder_shown_and_not_focused-text_body" data-fathom="cc-exp" data-ppui="true" data-ppui-info="masked-text-input_2.0.18" data-testid="split-card-expiry" id="cardExpiry" name="Date d'expiration" placeholder=" " required="" type="text" value=""/>`,
+            `<input aria-invalid="false" autocomplete="cc-exp" class="xo-member-16mpn99-text_input_control-text_body-label_placeholder_shown_and_not_focused-text_body" data-fathom="cc-exp" data-ppui="true" data-ppui-info="masked-text-input_2.0.18" data-testid="split-card-expiry" id="cardExpiry" name="Expiration date" placeholder=" " required="" type="text" value=""/>`,
+            `<input autocapitalize="none" autocomplete="cc-exp" autocorrect="off" class="h-padding-b-x2 h-padding-t-tight axiom-checkout-element-disabled" data-fathom="cc-exp" data-scrub="true" id="credit-card-expiration-input" maxlength="5" name="credit-card-expiration-input" type="tel" value=""/>`,
+            `<input autocapitalize="off" autocomplete="off" autocorrect="off" class="input-material__field input-cb-expiry-date idz_hide" data-fathom="cc-exp" id="expiry" maxlength="5" name="expiry" placeholder="MM/AA" step="1" type="tel" value=""/>`,
+            `<input autocomplete="off" class="input-text wc-credit-card-form-card-expiry" data-fathom="cc-exp" id="eh_authorize_net_aim_card-card-expiry" name="eh_authorize_net_aim_card-card-expiry" placeholder="MM / YY" type="text" value=""/>`,
+            `<input autocomplete="on" autocorrect="off" data-fathom="cc-exp" data-test-id="expMonthYear" id="expirationMonthYear" inputmode="numeric" maxlength="7" name="expirationMonthYear" pattern="(?:0[1-9]|1[0-2]) / [0-9]{2}" placeholder="MM / YY" required="" type="text" value=""/>`,
+            `<input class="form-control" data-fathom="cc-exp" name="expiry" pattern="\d\d/\d\d" placeholder="Valid Thru" required="" type="tel" value=""/>`,
+            `<input class="pl-input" data-fathom="cc-exp" id="pl-pm-cards_5-expirationDate" placeholder="MM/AA" type="tel" value=""/>`,
+            `<div class="current-field"><label for="expiry" class="visually-hidden">Expiration date (MM / YY)</label><input required="" aria-required="true" autocomplete="cc-exp" id="expiry" name="expiry" type="text" inputmode="numeric" pattern="[0-9\s\/]*" aria-describedby="error-for-expiry tooltip-for-expiry" data-current-field="expiry" class="input-placeholder-color--lvl-22" placeholder="Expiration date (MM / YY)" style="font-family:-apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;,&quot;Segoe UI Symbol&quot;;font-size:1rem;letter-spacing:normal;line-height:1.5;color:rgb(0,0,0);text-decoration:none;text-transform:none;--placeholder-color:hsl(0,0%,44%);padding:calc(0.5*(-1.5rem + max(2.35714rem,3.42857rem))) 0.785714rem calc(0.5*(-1.5rem + max(2.35714rem,3.42857rem))) 0.785714rem;transition:padding 0.2s ease-out" aria-invalid="true" value=""><span id="error-for-expiry" class="input-error-message visually-hidden">Enter a valid expiration date</span><span id="tooltip-for-expiry" class="input-tooltip-message visually-hidden"></span></div>`,
+            `<input required="true" aria-required="true" autocomplete="cc-exp" id="expiry" name="expiry" type="text" inputmode="numeric" pattern="[0-9\s\/]*" aria-describedby="error-for-expiry tooltip-for-expiry" data-current-field="expiry" class="input-placeholder-color--lvl-22" placeholder="" style="font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 1rem; letter-spacing: normal; line-height: 1.5; color: rgb(0, 0, 0); text-decoration: none; text-transform: none; --placeholder-color: hsl(0, 0%, 44%); padding: calc(1.5px + 0.857143rem + (0.5 * (-2.35714rem + max(2.35714rem, 3.42857rem)))) 0.785714rem calc(-1.5px - 2.35714rem + max(2.35714rem, 3.42857rem) - (0.5 * (-2.35714rem + max(2.35714rem, 3.42857rem)))); transition: padding 0.2s ease-out;" aria-invalid="true">`,
+            `<div class="current-field"><label for="expiry" class="visually-hidden">Expiration date (MM / YY)</label><input required="" aria-required="true" autocomplete="cc-exp" id="expiry" name="expiry" type="text" inputmode="numeric" pattern="[0-9\s\/]*" aria-describedby="error-for-expiry tooltip-for-expiry" data-current-field="expiry" class="input-placeholder-color--lvl-22" placeholder="Expiration date (MM / YY)" style="font-family:BYl9Vapu,sans-serif;font-size:1rem;letter-spacing:normal;line-height:1.5;color:rgb(0,0,0);text-decoration:none;text-transform:none;--placeholder-color:hsl(0,0%,44%);padding:calc(0.5*(-1.5rem + max(2.35714rem,3.42857rem))) 0.785714rem;transition:padding 0.2s ease-out" value=""><span id="error-for-expiry" class="input-error-message visually-hidden"></span><span id="tooltip-for-expiry" class="input-tooltip-message visually-hidden"></span></div>`,
+            `<div data-field="expiry" class="p-Field"><label class="p-FieldLabel Label Label--empty" for="Field-expiryInput">Expiration date<span class="FadeWrapper"></span><span class="u-visually-hidden"> MM / YY</span></label><div><div><div class="p-Input"><input dir="ltr" type="text" inputmode="numeric" name="expiry" id="Field-expiryInput" placeholder="MM / YY" autocomplete="cc-exp" aria-invalid="false" aria-describedby="Field-expiryError" aria-required="true" class="p-Input-input p-Fieldset-input Input Input--empty p-Input-input--textRight" value=""></div></div></div><div class="AnimateSinglePresence"></div></div>`,
+            `<div class="form-group"><label for="expMonth" class="text-nowrap">MM / AA</label><input class="form-control" type="text" inputmode="numeric" pattern="\d*" id="expMonth" autocomplete="cc-exp" autocorrect="off" spellcheck="false" maxlength="7" placeholder="MM / AA" value=""></div>`,
+            `<div class="unzerInput"><input id="card-expiry-date" type="tel" placeholder="03/30" maxlength="5" autocorrect="off" spellcheck="false" style="display: block;"></div>`,
+            `<div class="wt-form__field wt-flex-xs-2 wt-mr-sm-2 wt-mb-xs-3 wt-mb-sm-0" style=""><label data-clg-id="WtFormFieldLabel" for="P0-3" class="wt-label wt-label--small">Date d'expiration (MM/AA)<span> </span><span aria-hidden="true" class="wt-label__required"></span><span class="wt-screen-reader-only">Obligatoire</span></label><input data-clg-id="WtFormFieldMakedInput" type="text" maxlength="5" pattern="[0-9]*" inputmode="numeric" id="P0-3" placeholder="" name="expirationDate" class="wt-input wt-input--small" style="" aria-describedby="wt-formfield-error-8397a092-7147-4eaf-badc-f640cfc0d288    " touched="true" aria-invalid="true"><div data-clg-id="WtFormFieldError" class="wt-validation wt-display-flex-xs wt-align-items-top"><div class="wt-validation__icon__frame wt-validation__icon__frame--small"><span class="wt-validation__icon wt-icon--smaller-xs etsy-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 6v8h2V6zm1 9.25a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5"></path></svg></span></div><ul id="wt-formfield-error-8397a092-7147-4eaf-badc-f640cfc0d288" class="wt-list-unstyled"><li class="wt-validation__message wt-validation__message--small">Indiquez une date d'expiration au format MM/AA</li></ul></div></div>`,
+            `<div id="expiration" data-testid="test-container" class="StyledContainer-VDS__sc-1nnt7hu-2 ifooRk"><label data-testid="test-label" id="84e7660d-5137-42f6-b5f4-690d5557178b-label" label="Expiration date MM/YY*" for="84e7660d-5137-42f6-b5f4-690d5557178b" class="LabelWrapper-VDS__sc-13hvypf-0 ioqEzv"><p id="84e7660d-5137-42f6-b5f4-690d5557178b-label-text" aria-hidden="false" class="StyledTypography-VDS__sc-15sxhse-0 bMDKrk StyledBody-VDS__sc-1x4uqr-0 bORdrY">Expiration date MM/YY*</p></label><span class="FlexedRowContainer-VDS__sc-1nnt7hu-10 gKrjow"><span class="FlexedColContainer-VDS__sc-1nnt7hu-11 dlcBSK"><span class="InputContainer-VDS__sc-1nnt7hu-3 fgBGus"><div aria-live="off" class="InputWrapper-VDS__sc-1nnt7hu-9 bOeuNi"><input class="StyledInput-VDS__sc-1nnt7hu-5 lbxZgp" maxlength="5" data-testid="expiration" aria-label="expiration date MM/YY" aria-describedby="84e7660d-5137-42f6-b5f4-690d5557178b-error" id="84e7660d-5137-42f6-b5f4-690d5557178b" autocomplete="off" inputmode="numeric" name="expiration" data-cs-mask="true" pattern="[0-9]*" aria-required="true" form="creditDebitForm" required="" aria-invalid="false" type="text" aria-hidden="false" value="03/29" style="background-color: transparent;"><div class="StickyPlaceholder-VDS__sc-1nnt7hu-4 ghmQDx"><span>03/29</span></div></div></span><span aria-live="polite" aria-atomic="true" class="ScreenReaderText-VDS__sc-1nnt7hu-1 iizYPU"></span></span></span></div>`,
+        ];
+        fieldTest(CCFieldType.EXP, samples);
+    });
+    describe("CCFieldType.CC_EXP_MONTH", () => {
+        const samples = [
+            `<input _ngcontent-wrg-c49="" aria-label="month" autocomplete="cc-exp-month" class="form-control ng-untouched ng-pristine ng-invalid" data-fathom="cc-exp-month" formcontrolname="month" id="mm" inputmode="decimal" mask="00" maxlength="2" name="month" placeholder="MM" size="2" type="tel" validate-onblur="" value=""/>`,
+            `<input aria-describedby="ariaId_11" aria-invalid="true" aria-labelledby="ariaId_12" autocomplete="cc-exp-month" class="jfk-textinput b3id-text-input b3-text-input numeric label-input-label b3-invalid-control" data-fathom="cc-exp-month" data-is-secure="false" data-was-visible="true" maxlength="2" name="expirationDate-month" type="tel" value=""/>`,
+            `<input aria-invalid="false" autocapitalize="off" autocomplete="off" autocorrect="off" class="form-control input-sm ng-pristine ng-valid-maxlength ng-valid-pattern ng-invalid ng-invalid-required" data-fathom="cc-exp-month" data-ng-attr-placeholder="{{ 'CardExpireMonthPlaceholder' | phrase }}" id="card-expire-month" maxlength="2" name="card.month" ng-blur="sendCardGa(form['card.number'], form['card.month'], form['card.year'],form['card.security'])" ng-change="triggerScreenReaderValidation(form['card.month']);resetRemoteValidation(form['card.month'], form['card.year']);" ng-maxlength="2" ng-model="card.month" ng-pattern="/^\d{1,2}$/" ng-required="option.requireCard" only-digit-input="" placeholder="MM" required="" spellcheck="off" type="tel" value=""/>`,
+            `<select aria-describedby="error-creditCardExpirationMonth" aria-label="Expiration Month" aria-required="true" class="select-input" data-fathom="cc-exp-month" encrypt="true" id="input-creditCardExpirationMonth" name="field_creditCardExpirationMonth"> <option selected="" value=""> - Select One - </option> <option value="01"> 01 </option> <option value="02"> 02 </option> <option value="03"> 03 </option> <option value="04"> 04 </option> <option value="05"> 05 </option> <option value="06"> 06 </option> <option value="07"> 07 </option> <option value="08"> 08 </option> <option value="09"> 09 </option> <option value="10"> 10 </option> <option value="11"> 11 </option> <option value="12"> 12 </option> </select>`,
+            `<select aria-describedby="error-creditCardExpirationMonth" aria-label="Expiration Month" aria-required="true" class="select-input" data-fathom="cc-exp-month" encrypt="true" id="input-creditCardExpirationMonth" name="field_creditCardExpirationMonth"> <option selected="" value=""> - Select One - </option> <option value="01"> 01 </option> <option value="02"> 02 </option> <option value="03"> 03 </option> <option value="04"> 04 </option> <option value="05"> 05 </option> <option value="06"> 06 </option> <option value="07"> 07 </option> <option value="08"> 08 </option> <option value="09"> 09 </option> <option value="10"> 10 </option> <option value="11"> 11 </option> <option value="12"> 12 </option> </select>`,
+            `<select aria-describedby="error-creditCardExpirationMonth" aria-label="Expiration Month" aria-required="true" class="select-input" data-fathom="cc-exp-month" encrypt="true" id="input-creditCardExpirationMonth" name="field_creditCardExpirationMonth"> <option selected="" value=""> - Select One - </option> <option value="01"> 01 </option> <option value="02"> 02 </option> <option value="03"> 03 </option> <option value="04"> 04 </option> <option value="05"> 05 </option> <option value="06"> 06 </option> <option value="07"> 07 </option> <option value="08"> 08 </option> <option value="09"> 09 </option> <option value="10"> 10 </option> <option value="11"> 11 </option> <option value="12"> 12 </option> </select>`,
+            `<select aria-describedby="error-creditCardExpirationMonth" aria-label="Expiration Month" aria-required="true" class="select-input" data-fathom="cc-exp-month" encrypt="true" id="input-creditCardExpirationMonth" name="field_creditCardExpirationMonth"> <option selected="" value=""> - Select One - </option> <option value="01"> 01 </option> <option value="02"> 02 </option> <option value="03"> 03 </option> <option value="04"> 04 </option> <option value="05"> 05 </option> <option value="06"> 06 </option> <option value="07"> 07 </option> <option value="08"> 08 </option> <option value="09"> 09 </option> <option value="10"> 10 </option> <option value="11"> 11 </option> <option value="12"> 12 </option> </select>`,
+            `<select aria-describedby="error-creditCardExpirationMonth" aria-label="Expiration Month" aria-required="true" class="select-input" data-fathom="cc-exp-month" encrypt="true" id="input-creditCardExpirationMonth" name="field_creditCardExpirationMonth"> <option selected="" value=""> - Select One - </option> <option value="01"> 01 </option> <option value="02"> 02 </option> <option value="03"> 03 </option> <option value="04"> 04 </option> <option value="05"> 05 </option> <option value="06"> 06 </option> <option value="07"> 07 </option> <option value="08"> 08 </option> <option value="09"> 09 </option> <option value="10"> 10 </option> <option value="11"> 11 </option> <option value="12"> 12 </option> </select>`,
+            `<select aria-describedby="error-creditCardExpirationMonth" aria-label="Expiration Month" aria-required="true" class="select-input" data-fathom="cc-exp-month" encrypt="true" id="input-creditCardExpirationMonth" name="field_creditCardExpirationMonth"> <option selected="" value="">- Select One -</option> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <option value="04">04</option> <option value="05">05</option> <option value="06">06</option> <option value="07">07</option> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select>`,
+            `<select aria-label="Expiration Date Month" aria-required="true" autocomplete="off" data-fathom="cc-exp-month" data-validate="expMonth" disabled="" id="rc-payment-card-month" name="expMonth" required=""> <option selected="" value="">Month</option> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <option value="04">04</option> <option value="05">05</option> <option value="06">06</option> <option value="07">07</option> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select>`,
+            `<select aria-labelledby="expiration_date" class="vads-expiry-date-input" data-fathom="cc-exp-month" id="vads-expiry-month-input" name="vads_expiry_month" size="1"> <option selected="" value="">mois</option> <option value="1"> 01-Janvier </option> <option value="2"> 02-Février </option> <option value="3"> 03-Mars </option> <option value="4"> 04-Avril </option> <option value="5"> 05-Mai </option> <option value="6"> 06-Juin </option> <option value="7"> 07-Juillet </option> <option value="8"> 08-Août </option> <option value="9"> 09-Septembre </option> <option value="10"> 10-Octobre </option> <option value="11"> 11-Novembre </option> <option value="12"> 12-Décembre </option> </select>`,
+            `<select aria-labelledby="expiration_date" class="vads-expiry-date-input" data-fathom="cc-exp-month" id="vads-expiry-month-input" name="vads_expiry_month" size="1"> <option selected="" value="">mois</option> <option value="1"> 01-Janvier </option> <option value="2"> 02-Février </option> <option value="3"> 03-Mars </option> <option value="4"> 04-Avril </option> <option value="5"> 05-Mai </option> <option value="6"> 06-Juin </option> <option value="7"> 07-Juillet </option> <option value="8"> 08-Août </option> <option value="9"> 09-Septembre </option> <option value="10"> 10-Octobre </option> <option value="11"> 11-Novembre </option> <option value="12"> 12-Décembre </option> </select>`,
+            `<select aria-labelledby="expiration_date" class="vads-expiry-date-input" data-fathom="cc-exp-month" id="vads-expiry-month-input" name="vads_expiry_month" size="1"> <option selected="" value="">mois</option> <option value="1"> 01-Janvier </option> <option value="2"> 02-Février </option> <option value="3"> 03-Mars </option> <option value="4"> 04-Avril </option> <option value="5"> 05-Mai </option> <option value="6"> 06-Juin </option> <option value="7"> 07-Juillet </option> <option value="8"> 08-Août </option> <option value="9"> 09-Septembre </option> <option value="10"> 10-Octobre </option> <option value="11"> 11-Novembre </option> <option value="12"> 12-Décembre </option> </select>`,
+            `<select autocomplete="cc-exp-month" data-fathom="cc-exp-month" id="Ecom_Payment_Card_ExpDate_Month" name="Ecom_Payment_Card_ExpDate_Month" style="display: "> <option selected="" value=""> Mois </option> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <option value="04">04</option> <option value="05">05</option> <option value="06">06</option> <option value="07">07</option> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select>`,
+            `<select autocomplete="off" class="a-native-dropdown pmts-native-dropdown" data-a-native-class="pmts-native-dropdown" data-fathom="cc-exp-month" id="pp-3XyMeN-20" name="ppw-expirationDate_month" tabindex="0"><option selected="" value="1">01<option value="2">02<option value="3">03<option value="4">04<option value="5">05<option value="6">06<option value="7">07<option value="8">08<option value="9">09<option value="10">10<option value="11">11<option value="12">12</option></option></option></option></option></option></option></option></option></option></option></option></select>`,
+            `<select autocomplete="off" class="a-native-dropdown pmts-native-dropdown" data-a-native-class="pmts-native-dropdown" data-fathom="cc-exp-month" id="pp-4MEsHB-20" name="ppw-expirationDate_month" tabindex="0"><option selected="" value="1">01<option value="2">02<option value="3">03<option value="4">04<option value="5">05<option value="6">06<option value="7">07<option value="8">08<option value="9">09<option value="10">10<option value="11">11<option value="12">12</option></option></option></option></option></option></option></option></option></option></option></option></select>`,
+            `<select autocomplete="off" class="a-native-dropdown pmts-native-dropdown" data-a-native-class="pmts-native-dropdown" data-fathom="cc-exp-month" id="pp-Ka9je1-20" name="ppw-expirationDate_month" tabindex="0"> <option selected="" value="1"> 01 </option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12"> 12 </option></select>`,
+            `<select autocomplete="off" class="a-native-dropdown pmts-native-dropdown" data-a-native-class="pmts-native-dropdown" data-fathom="cc-exp-month" id="pp-v9rInZ-20" name="ppw-expirationDate_month" tabindex="0"> <option selected="" value="1"> 01 </option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12"> 12 </option></select>`,
+            `<input id="cc-expiry-month" name="card_expiry_month" required="" type="tel" inputmode="numeric" pattern="[0-9]*" maxlength="2" autocomplete="cc-exp-month" x-autocompletetype="cc-exp-month" autocorrect="off" spellcheck="false" data-focus-proxy="cc-expiry-outer" aria-invalid="true" aria-labelledby="cc-expiry-month-label cc-expiry-error" placeholder="MM" class="form-control lead cc-expiry-month d2" style="" value="27">`,
+            `<div _ngcontent-lpb-c46="" class="has-float-label"><input _ngcontent-lpb-c46="" type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+" id="MM" name="month" aria-label="month" maxlength="2" min="1" max="12" required="" formcontrolname="month" validate-onblur="" autocomplete="cc-exp-month" class="form-control ng-pristine ng-invalid ng-untouched" placeholder="Month" value=""><label _ngcontent-lpb-c46="" for="MM" class="">Month <span _ngcontent-lpb-c46="" class="asterisk">*</span></label></div>`,
+            `<div class="form-cell layout-quarter"><label class="form-cell-name">Expiration date</label><label class="form-select is-wide"><select title="Select a Month" aria-label="Month of Expiration date"><option selected="">Month</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select><span class="form-select-name">Month</span> <i class="fas fa-caret-down"></i><span class="form-error-message undefined" style="display:none"></span></label></div>`,
+            `<span class="a-dropdown-container"><select name="ppw-expirationDate_HBA_month" autocomplete="off" data-a-native-class="pmts-native-dropdown" id="pp-ZpMCTN-15" tabindex="0" class="a-native-dropdown pmts-native-dropdown"><option value="1" selected="">01</option><option value="2">02</option><option value="3">03</option><option value="4">04</option><option value="5">05</option><option value="6">06</option><option value="7">07</option><option value="8">08</option><option value="9">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select><span tabindex="-1" id="pp-ZpMCTN-18" data-pmts-component-id="pp-ZpMCTN-3" data-a-class="pmts-portal-component pmts-portal-components-pp-ZpMCTN-3" class="a-button a-button-dropdown pmts-portal-component pmts-portal-components-pp-ZpMCTN-3" aria-hidden="true" style="min-width: 0.416667%;"><span class="a-button-inner"><span class="a-button-text a-declarative" data-action="a-dropdown-button" role="button" aria-hidden="true"><span class="a-dropdown-prompt">06</span></span><i class="a-icon a-icon-dropdown"></i></span></span></span>`,
+            `<div class="form-cell layout-quarter"><label class="form-cell-name">Expiration date</label><label class="form-select is-wide"><select title="Select a Month" aria-label="Month of Expiration date"><option selected="">Month</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select><span class="form-select-name">Month</span> <i class="fas fa-caret-down"></i><span class="form-error-message undefined" style="display:none"></span></label></div>`,
+            `<x-text-control class="control control-text ng-touched ng-dirty ng-invalid empty-value"><label for="x-text-control-input-card_month">Expiration date</label><div class="control-input-wrapper"><input id="x-text-control-input-card_month" name="card_month" type="text" autocomplete="cc-exp-month" placeholder="MM" inputmode="numeric" class="tether-target tether-abutted tether-abutted-left tether-element-attached-top tether-element-attached-left tether-target-attached-bottom tether-target-attached-left" value=""><x-control-icon class="null"></x-control-icon><span class="i control-success sf-hidden"></span><x-control-preloader></x-control-preloader></div><x-control-hint><span class="i control-hint sf-hidden" role="button" hidden="" title="null"></span></x-control-hint></x-text-control>`,
+            `<fieldset class="Form__Fieldset-sc-1rpc86b-1 fKhXDo"><legend class="Label-sc-1wdkkfu-0 cEywXb ddl-label has-error">Expiry date</legend><label for="card-expiry-month" hidden="" class="Label-sc-1wdkkfu-0 mZWly sf-hidden">month</label><input type="tel" data-auto="card-expiry-month" name="expiryMonth" id="card-expiry-month" placeholder="MM" maxlength="2" aria-required="true" data-rule="expiryMonthRule" class="Input-sc-gj7hrn-1 expiry-date__ExpiryInput-sc-m6yl5f-0 bSmREw eDVddD has-error" data-errored="true" value="1"><span aria-hidden="true" class="expiry-date__ExpirySeparator-sc-m6yl5f-1 huzqtm">/</span></div></fieldset>`,
+            `<input name="validMONTH" id="expmonth" class="exp-input numberOnly" maxlength="2" tabindex="1" type="tel" placeholder="LL" required="" style="margin-right:10px" value="">`,
+            `<div class="form-group form-label-group dwfrm_billing_creditCardFields_expirationMonth"><label class="form-control-label form-select-label" for="expirationMonth"><span>Monat</span></label><select class="form-control expirationMonth custom-select" id="expirationMonth" data-missing-error="Bitte wähle den Monat aus, in dem die Karte abläuft." data-range-error="Diese Kreditkarte ist abgelaufen." name="dwfrm_billing_creditCardFields_expirationMonth" required="" aria-required="true" autocomplete="cc-exp-month" data-gtm-form-interact-field-id="9"><option value="" selected="">Monat</option><option id="01" value="1">01</option><option id="02" value="2">02</option><option id="03" value="3">03</option><option id="04" value="4">04</option><option id="05" value="5">05</option><option id="06" value="6">06</option><option id="07" value="7">07</option><option id="08" value="8">08</option><option id="09" value="9">09</option><option id="10" value="10">10</option><option id="11" value="11">11</option><option id="12" value="12">12</option> </select><div class="invalid-feedback sf-hidden"></div></div>`,
+        ];
+        fieldTest(CCFieldType.EXP_MONTH, samples);
+    });
+    describe("CCFieldType.CC_EXP_YEAR", () => {
+        const samples = [
+            `<input _ngcontent-wrg-c49="" aria-label="year" autocomplete="cc-exp-year" class="form-control ng-untouched ng-pristine ng-invalid" data-fathom="cc-exp-year" formcontrolname="year" id="yy" inputmode="decimal" mask="00" maxlength="2" name="year" placeholder="YY" size="2" type="tel" validate-onblur="" value=""/>`,
+            `<input aria-describedby="ariaId_13" aria-invalid="true" aria-labelledby="ariaId_14" autocomplete="cc-exp-year" class="jfk-textinput b3id-text-input b3-text-input numeric label-input-label b3-invalid-control" data-fathom="cc-exp-year" data-is-secure="false" data-was-visible="true" maxlength="2" name="expirationDate-year" type="tel" value=""/>`,
+            `<input aria-invalid="false" autocapitalize="off" autocomplete="off" autocorrect="off" class="form-control input-sm ng-pristine ng-valid-maxlength ng-valid-pattern ng-invalid ng-invalid-required" data-fathom="cc-exp-year" data-ng-attr-placeholder="{{ 'CardExpireYearPlaceholder' | phrase }}" id="card-expire-year" maxlength="4" name="card.year" ng-blur="sendCardGa(form['card.number'], form['card.month'], form['card.year'],form['card.security'])" ng-change="resetRemoteValidation(form['card.year'], form['card.month']);triggerScreenReaderValidation(form['card.year']);" ng-maxlength="4" ng-model="card.year" ng-pattern="/^\d{2,4}$/" ng-required="option.requireCard" only-digit-input="" placeholder="YY" required="" spellcheck="off" type="tel" value=""/>`,
+            `<select aria-describedby="error-creditCardExpirationMonth" aria-label="Expiration Year" aria-required="true" class="select-input" data-fathom="cc-exp-year" encrypt="true" id="input-creditCardExpirationYear" name="field_creditCardExpirationYear"> <option selected="" value=""> - Select One - </option> <option value="2024"> 2024 </option> <option value="2025"> 2025 </option> <option value="2026"> 2026 </option> <option value="2027"> 2027 </option> <option value="2028"> 2028 </option> <option value="2029"> 2029 </option> <option value="2030"> 2030 </option> <option value="2031"> 2031 </option> <option value="2032"> 2032 </option> <option value="2033"> 2033 </option> <option value="2034"> 2034 </option> <option value="2035"> 2035 </option> <option value="2036"> 2036 </option> <option value="2037"> 2037 </option> <option value="2038"> 2038 </option> <option value="2039"> 2039 </option> <option value="2040"> 2040 </option> <option value="2041"> 2041 </option> <option value="2042"> 2042 </option> <option value="2043"> 2043 </option> <option value="2044"> 2044 </option> </select>`,
+            `<select aria-describedby="error-creditCardExpirationMonth" aria-label="Expiration Year" aria-required="true" class="select-input" data-fathom="cc-exp-year" encrypt="true" id="input-creditCardExpirationYear" name="field_creditCardExpirationYear"> <option selected="" value=""> - Select One - </option> <option value="2024"> 2024 </option> <option value="2025"> 2025 </option> <option value="2026"> 2026 </option> <option value="2027"> 2027 </option> <option value="2028"> 2028 </option> <option value="2029"> 2029 </option> <option value="2030"> 2030 </option> <option value="2031"> 2031 </option> <option value="2032"> 2032 </option> <option value="2033"> 2033 </option> <option value="2034"> 2034 </option> <option value="2035"> 2035 </option> <option value="2036"> 2036 </option> <option value="2037"> 2037 </option> <option value="2038"> 2038 </option> <option value="2039"> 2039 </option> <option value="2040"> 2040 </option> <option value="2041"> 2041 </option> <option value="2042"> 2042 </option> <option value="2043"> 2043 </option> <option value="2044"> 2044 </option> </select>`,
+            `<select aria-describedby="error-creditCardExpirationMonth" aria-label="Expiration Year" aria-required="true" class="select-input" data-fathom="cc-exp-year" encrypt="true" id="input-creditCardExpirationYear" name="field_creditCardExpirationYear"> <option selected="" value=""> - Select One - </option> <option value="2024"> 2024 </option> <option value="2025"> 2025 </option> <option value="2026"> 2026 </option> <option value="2027"> 2027 </option> <option value="2028"> 2028 </option> <option value="2029"> 2029 </option> <option value="2030"> 2030 </option> <option value="2031"> 2031 </option> <option value="2032"> 2032 </option> <option value="2033"> 2033 </option> <option value="2034"> 2034 </option> <option value="2035"> 2035 </option> <option value="2036"> 2036 </option> <option value="2037"> 2037 </option> <option value="2038"> 2038 </option> <option value="2039"> 2039 </option> <option value="2040"> 2040 </option> <option value="2041"> 2041 </option> <option value="2042"> 2042 </option> <option value="2043"> 2043 </option> <option value="2044"> 2044 </option> </select>`,
+            `<select aria-describedby="error-creditCardExpirationMonth" aria-label="Expiration Year" aria-required="true" class="select-input" data-fathom="cc-exp-year" encrypt="true" id="input-creditCardExpirationYear" name="field_creditCardExpirationYear"> <option selected="" value=""> - Select One - </option> <option value="2024"> 2024 </option> <option value="2025"> 2025 </option> <option value="2026"> 2026 </option> <option value="2027"> 2027 </option> <option value="2028"> 2028 </option> <option value="2029"> 2029 </option> <option value="2030"> 2030 </option> <option value="2031"> 2031 </option> <option value="2032"> 2032 </option> <option value="2033"> 2033 </option> <option value="2034"> 2034 </option> <option value="2035"> 2035 </option> <option value="2036"> 2036 </option> <option value="2037"> 2037 </option> <option value="2038"> 2038 </option> <option value="2039"> 2039 </option> <option value="2040"> 2040 </option> <option value="2041"> 2041 </option> <option value="2042"> 2042 </option> <option value="2043"> 2043 </option> <option value="2044"> 2044 </option> </select>`,
+            `<select aria-describedby="error-creditCardExpirationMonth" aria-label="Expiration Year" aria-required="true" class="select-input" data-fathom="cc-exp-year" encrypt="true" id="input-creditCardExpirationYear" name="field_creditCardExpirationYear"> <option selected="" value=""> - Select One - </option> <option value="2024"> 2024 </option> <option value="2025"> 2025 </option> <option value="2026"> 2026 </option> <option value="2027"> 2027 </option> <option value="2028"> 2028 </option> <option value="2029"> 2029 </option> <option value="2030"> 2030 </option> <option value="2031"> 2031 </option> <option value="2032"> 2032 </option> <option value="2033"> 2033 </option> <option value="2034"> 2034 </option> <option value="2035"> 2035 </option> <option value="2036"> 2036 </option> <option value="2037"> 2037 </option> <option value="2038"> 2038 </option> <option value="2039"> 2039 </option> <option value="2040"> 2040 </option> <option value="2041"> 2041 </option> <option value="2042"> 2042 </option> <option value="2043"> 2043 </option> <option value="2044"> 2044 </option> </select>`,
+            `<select aria-describedby="error-creditCardExpirationMonth" aria-label="Expiration Year" aria-required="true" class="select-input" data-fathom="cc-exp-year" encrypt="true" id="input-creditCardExpirationYear" name="field_creditCardExpirationYear"> <option selected="" value="">- Select One -</option> <option value="2024">2024</option> <option value="2025">2025</option> <option value="2026">2026</option> <option value="2027">2027</option> <option value="2028">2028</option> <option value="2029">2029</option> <option value="2030">2030</option> <option value="2031">2031</option> <option value="2032">2032</option> <option value="2033">2033</option> <option value="2034">2034</option> <option value="2035">2035</option> <option value="2036">2036</option> <option value="2037">2037</option> <option value="2038">2038</option> <option value="2039">2039</option> <option value="2040">2040</option> <option value="2041">2041</option> <option value="2042">2042</option> <option value="2043">2043</option> <option value="2044">2044</option> </select>`,
+            `<select aria-label="Expiration Date Year" aria-required="true" autocomplete="off" data-fathom="cc-exp-year" data-validate="expYear" disabled="" id="rc-payment-card-year" name="expYear" required=""> <option selected="" value="">Year</option> <option value="2024">2024</option> <option value="2025">2025</option> <option value="2026">2026</option> <option value="2027">2027</option> <option value="2028">2028</option> <option value="2029">2029</option> <option value="2030">2030</option> <option value="2031">2031</option> <option value="2032">2032</option> <option value="2033">2033</option> </select>`,
+            `<select aria-labelledby="expiration_date" data-fathom="cc-exp-year" id="vads-expiry-year-input" name="vads_expiry_year" size="1"> <option selected="" value=""> année</option> <option value="2024"> 2024</option> <option value="2025"> 2025</option> <option value="2026"> 2026</option> <option value="2027"> 2027</option> <option value="2028"> 2028</option> <option value="2029"> 2029</option> <option value="2030"> 2030</option> <option value="2031"> 2031</option> <option value="2032"> 2032</option> <option value="2033"> 2033</option> <option value="2034"> 2034</option> <option value="2035"> 2035</option> <option value="2036"> 2036</option> <option value="2037"> 2037</option> <option value="2038"> 2038</option> <option value="2039"> 2039</option> <option value="2040"> 2040</option> <option value="2041"> 2041</option> <option value="2042"> 2042</option> <option value="2043"> 2043</option> <option value="2044"> 2044</option> <option value="2045"> 2045</option> <option value="2046"> 2046</option> <option value="2047"> 2047</option> <option value="2048"> 2048</option> <option value="2049"> 2049</option> <option value="2050"> 2050</option> <option value="2051"> 2051</option> <option value="2052"> 2052</option> <option value="2053"> 2053</option> <option value="2054"> 2054</option> </select>`,
+            `<select aria-labelledby="expiration_date" data-fathom="cc-exp-year" id="vads-expiry-year-input" name="vads_expiry_year" size="1"> <option selected="" value=""> année</option> <option value="2024"> 2024</option> <option value="2025"> 2025</option> <option value="2026"> 2026</option> <option value="2027"> 2027</option> <option value="2028"> 2028</option> <option value="2029"> 2029</option> <option value="2030"> 2030</option> <option value="2031"> 2031</option> <option value="2032"> 2032</option> <option value="2033"> 2033</option> <option value="2034"> 2034</option> <option value="2035"> 2035</option> <option value="2036"> 2036</option> <option value="2037"> 2037</option> <option value="2038"> 2038</option> <option value="2039"> 2039</option> <option value="2040"> 2040</option> <option value="2041"> 2041</option> <option value="2042"> 2042</option> <option value="2043"> 2043</option> <option value="2044"> 2044</option> <option value="2045"> 2045</option> <option value="2046"> 2046</option> <option value="2047"> 2047</option> <option value="2048"> 2048</option> <option value="2049"> 2049</option> <option value="2050"> 2050</option> <option value="2051"> 2051</option> <option value="2052"> 2052</option> <option value="2053"> 2053</option> <option value="2054"> 2054</option> </select>`,
+            `<select aria-labelledby="expiration_date" data-fathom="cc-exp-year" id="vads-expiry-year-input" name="vads_expiry_year" size="1"> <option selected="" value=""> année</option> <option value="2024"> 2024</option> <option value="2025"> 2025</option> <option value="2026"> 2026</option> <option value="2027"> 2027</option> <option value="2028"> 2028</option> <option value="2029"> 2029</option> <option value="2030"> 2030</option> <option value="2031"> 2031</option> <option value="2032"> 2032</option> <option value="2033"> 2033</option> <option value="2034"> 2034</option> <option value="2035"> 2035</option> <option value="2036"> 2036</option> <option value="2037"> 2037</option> <option value="2038"> 2038</option> <option value="2039"> 2039</option> <option value="2040"> 2040</option> <option value="2041"> 2041</option> <option value="2042"> 2042</option> <option value="2043"> 2043</option> <option value="2044"> 2044</option> <option value="2045"> 2045</option> <option value="2046"> 2046</option> <option value="2047"> 2047</option> <option value="2048"> 2048</option> <option value="2049"> 2049</option> <option value="2050"> 2050</option> <option value="2051"> 2051</option> <option value="2052"> 2052</option> <option value="2053"> 2053</option> <option value="2054"> 2054</option> </select>`,
+            `<select autocomplete="cc-exp-year" data-fathom="cc-exp-year" id="Ecom_Payment_Card_ExpDate_Year" name="Ecom_Payment_Card_ExpDate_Year" style="display: "> <option selected="" value=""> Année </option> <option value="2024"> 2024 </option> <option value="2025"> 2025 </option> <option value="2026"> 2026 </option> <option value="2027"> 2027 </option> <option value="2028"> 2028 </option> <option value="2029"> 2029 </option> <option value="2030"> 2030 </option> <option value="2031"> 2031 </option> <option value="2032"> 2032 </option> <option value="2033"> 2033 </option> <option value="2034"> 2034 </option> <option value="2035"> 2035 </option> <option value="2036"> 2036 </option> <option value="2037"> 2037 </option> <option value="2038"> 2038 </option> <option value="2039"> 2039 </option> <option value="2040"> 2040 </option> <option value="2041"> 2041 </option> <option value="2042"> 2042 </option> <option value="2043"> 2043 </option> <option value="2044"> 2044 </option> </select>`,
+            `<select autocomplete="off" class="a-native-dropdown pmts-native-dropdown" data-a-native-class="pmts-native-dropdown" data-fathom="cc-exp-year" id="pp-3XyMeN-22" name="ppw-expirationDate_year" tabindex="0"><option selected="" value="2024">2024<option value="2025">2025<option value="2026">2026<option value="2027">2027<option value="2028">2028<option value="2029">2029<option value="2030">2030<option value="2031">2031<option value="2032">2032<option value="2033">2033<option value="2034">2034<option value="2035">2035<option value="2036">2036<option value="2037">2037<option value="2038">2038<option value="2039">2039<option value="2040">2040<option value="2041">2041<option value="2042">2042<option value="2043">2043<option value="2044">2044</option></option></option></option></option></option></option></option></option></option></option></option></option></option></option></option></option></option></option></option></option></select>`,
+            `<select autocomplete="off" class="a-native-dropdown pmts-native-dropdown" data-a-native-class="pmts-native-dropdown" data-fathom="cc-exp-year" id="pp-4MEsHB-22" name="ppw-expirationDate_year" tabindex="0"><option selected="" value="2024">2024<option value="2025">2025<option value="2026">2026<option value="2027">2027<option value="2028">2028<option value="2029">2029<option value="2030">2030<option value="2031">2031<option value="2032">2032<option value="2033">2033<option value="2034">2034<option value="2035">2035<option value="2036">2036<option value="2037">2037<option value="2038">2038<option value="2039">2039<option value="2040">2040<option value="2041">2041<option value="2042">2042<option value="2043">2043<option value="2044">2044</option></option></option></option></option></option></option></option></option></option></option></option></option></option></option></option></option></option></option></option></option></select>`,
+            `<select autocomplete="off" class="a-native-dropdown pmts-native-dropdown" data-a-native-class="pmts-native-dropdown" data-fathom="cc-exp-year" id="pp-Ka9je1-22" name="ppw-expirationDate_year" tabindex="0"> <option selected="" value="2024"> 2024 </option> <option value="2025">2025</option> <option value="2026">2026</option> <option value="2027">2027</option> <option value="2028">2028</option> <option value="2029">2029</option> <option value="2030">2030</option> <option value="2031">2031</option> <option value="2032">2032</option> <option value="2033">2033</option> <option value="2034">2034</option> <option value="2035">2035</option> <option value="2036">2036</option> <option value="2037">2037</option> <option value="2038">2038</option> <option value="2039">2039</option> <option value="2040">2040</option> <option value="2041">2041</option> <option value="2042">2042</option> <option value="2043">2043</option> <option value="2044"> 2044 </option></select>`,
+            `<select autocomplete="off" class="a-native-dropdown pmts-native-dropdown" data-a-native-class="pmts-native-dropdown" data-fathom="cc-exp-year" id="pp-v9rInZ-22" name="ppw-expirationDate_year" tabindex="0"> <option selected="" value="2024"> 2024 </option> <option value="2025">2025</option> <option value="2026">2026</option> <option value="2027">2027</option> <option value="2028">2028</option> <option value="2029">2029</option> <option value="2030">2030</option> <option value="2031">2031</option> <option value="2032">2032</option> <option value="2033">2033</option> <option value="2034">2034</option> <option value="2035">2035</option> <option value="2036">2036</option> <option value="2037">2037</option> <option value="2038">2038</option> <option value="2039">2039</option> <option value="2040">2040</option> <option value="2041">2041</option> <option value="2042">2042</option> <option value="2043">2043</option> <option value="2044"> 2044 </option></select>`,
+            `<input id="cc-expiry-year" required="" type="tel" inputmode="numeric" pattern="[0-9]*" maxlength="2" autocomplete="cc-exp-year" x-autocompletetype="cc-exp-year" autocorrect="off" spellcheck="false" data-focus-proxy="cc-expiry-outer" aria-invalid="true" aria-labelledby="cc-expiry-year-label cc-expiry-error" placeholder="AA" class="form-control cc-expiry-year d1" style="" value="27">`,
+            `<div _ngcontent-lpb-c46="" class="has-float-label"><input _ngcontent-lpb-c46="" validate-onblur="" type="text" inputmode="numeric" pattern="[0-9]*" id="YY" maxlength="2" min="23" max="33" required="" formcontrolname="year" autocomplete="cc-exp-year" class="form-control ng-pristine ng-invalid ng-untouched" placeholder="Year" value=""><label _ngcontent-lpb-c46="" for="YY" class="">Year <span _ngcontent-lpb-c46="" class="asterisk">*</span></label></div>`,
+            `<label class="form-select is-wide"><select title="Select a Year" aria-label="Year of Expiration Date" name="expYear"><option selected="" value="Year" hidden="">Year</option><option>2025</option><option>2026</option><option>2027</option><option>2028</option><option>2029</option><option>2030</option><option>2031</option><option>2032</option><option>2033</option><option>2034</option><option>2035</option><option>2036</option><option>2037</option><option>2038</option></select><span class="form-select-name">2032</span> <i class="fas fa-caret-down"></i></label>`,
+            `<span class="a-dropdown-container"><select name="ppw-expirationDate_HBA_year" autocomplete="off" data-a-native-class="pmts-native-dropdown" id="pp-ZpMCTN-17" tabindex="0" class="a-native-dropdown pmts-native-dropdown"><option value="2025" selected="">2025</option><option value="2026">2026</option><option value="2027">2027</option><option value="2028">2028</option><option value="2029">2029</option><option value="2030">2030</option><option value="2031">2031</option><option value="2032">2032</option><option value="2033">2033</option><option value="2034">2034</option><option value="2035">2035</option><option value="2036">2036</option><option value="2037">2037</option><option value="2038">2038</option><option value="2039">2039</option><option value="2040">2040</option><option value="2041">2041</option><option value="2042">2042</option><option value="2043">2043</option><option value="2044">2044</option><option value="2045">2045</option></select><span tabindex="-1" id="pp-ZpMCTN-19" data-pmts-component-id="pp-ZpMCTN-3" data-a-class="pmts-portal-component pmts-portal-components-pp-ZpMCTN-3" class="a-button a-button-dropdown pmts-portal-component pmts-portal-components-pp-ZpMCTN-3" aria-hidden="true" style="min-width: 0.428571%;"><span class="a-button-inner"><span class="a-button-text a-declarative" data-action="a-dropdown-button" role="button" aria-hidden="true"><span class="a-dropdown-prompt">2034</span></span><i class="a-icon a-icon-dropdown"></i></span></span></span>`,
+            `<div class="form-cell layout-quarter"><label class="form-select is-wide"><select title="Select a Year" aria-label="Year of Expiration Date" name="expYear"><option selected="" value="Year" hidden="">Year</option><option>2025</option><option>2026</option><option>2027</option><option>2028</option><option>2029</option><option>2030</option><option>2031</option><option>2032</option><option>2033</option><option>2034</option><option>2035</option><option>2036</option><option>2037</option><option>2038</option></select><span class="form-select-name">2032</span> <i class="fas fa-caret-down"></i></label><span class="form-error-message undefined" style="display:none"></span></div>`,
+            `<x-text-control class="control control-text ng-touched ng-dirty ng-invalid empty-value"><div class="control-input-wrapper"><input id="x-text-control-input-card_year" name="card_year" type="text" maxlength="2" autocomplete="cc-exp-year" placeholder="YY" inputmode="numeric" class="tether-target tether-abutted tether-abutted-left tether-element-attached-top tether-element-attached-left tether-target-attached-bottom tether-target-attached-left" value=""><x-control-icon class="null"></x-control-icon><span class="i control-success sf-hidden"></span><x-control-preloader></x-control-preloader></div><x-control-hint><span class="i control-hint sf-hidden" role="button" hidden="" title="null"></span></x-control-hint></x-text-control>`,
+            `<fieldset class="Form__Fieldset-sc-1rpc86b-1 fKhXDo"><legend class="Label-sc-1wdkkfu-0 cEywXb ddl-label has-error">Expiry date</legend><span aria-hidden="true" class="expiry-date__ExpirySeparator-sc-m6yl5f-1 huzqtm">/</span><label for="card-expiry-year" hidden="" class="Label-sc-1wdkkfu-0 mZWly sf-hidden">year</label><input type="tel" data-auto="card-expiry-year" name="expiryYear" id="card-expiry-year" placeholder="YY" maxlength="2" aria-required="true" data-rule="expiryYearRule" class="Input-sc-gj7hrn-1 expiry-date__ExpiryInput-sc-m6yl5f-0 bSmREw eDVddD" value="32"><div class="error-container"><span aria-live="polite" role="alert" class="error-message__ValidationMessage-sc-1l3lpj8-0 eImjus validation-message">Please enter your card expiry date</span></div></fieldset>`,
+            `<input name="validYEAR" id="expyear" class="exp-input numberOnly" maxlength="2" tabindex="1" type="tel" placeholder="AA" required="" value="">`,
+            `<div class="form-group form-label-group dwfrm_billing_creditCardFields_expirationYear"><label class="form-control-label form-select-label" for="expirationYear"><span>Jahr</span></label><select class="form-control expirationYear custom-select" id="expirationYear" data-missing-error="Bitte wähle das Jahr aus, in dem die Karte abläuft." name="dwfrm_billing_creditCardFields_expirationYear" required="" aria-required="true" autocomplete="cc-exp-year" data-gtm-form-interact-field-id="8">      <option value="">Jahr</option><option id="2025" value="2025" selected="">2025</option><option id="2026" value="2026">2026</option><option id="2027" value="2027">2027</option><option id="2028" value="2028">2028</option><option id="2029" value="2029">2029</option><option id="2030" value="2030">2030</option><option id="2031" value="2031">2031</option><option id="2032" value="2032">2032</option><option id="2033" value="2033">2033</option><option id="2034" value="2034">2034</option> </select><div class="invalid-feedback sf-hidden"></div></div>`,
+        ];
+        fieldTest(CCFieldType.EXP_YEAR, samples);
+    });
+    describe("CCFieldType.FIRSTNAME", () => {
+        const samples = [
+            `<input aria-describedby="firstName-field-message" aria-invalid="false" autocomplete="cc-given-name" class="textbox__control textbox__control--fluid textbox__control--large" data-fathom="cc-firstname" id="firstName" name="firstName" type="text" value=""/>`,
+            `<input aria-describedby="firstName-field-message" aria-invalid="false" autocomplete="cc-given-name" class="textbox__control textbox__control--fluid textbox__control--large" data-fathom="cc-firstname" id="firstName" name="firstName" type="text" value=""/>`,
+            `<input aria-invalid="false" class="css-1j9pffl" data-fathom="cc-firstname" data-testid="new-card-first-name-field" id="firstName" name="firstName" placeholder="" type="text" value=""/>`,
+            `<input aria-invalid="false" class="xo-member-16mpn99-text_input_control-text_body-label_placeholder_shown_and_not_focused-text_body" data-fathom="cc-firstname" data-ppui="true" data-testid="card-first-name" id="ccFirstName" name="ccFirstName" pattern="[a-zA-Z- .']+" placeholder=" " required="" type="text" value="John"/>`,
+            `<input aria-invalid="false" class="xo-member-16mpn99-text_input_control-text_body-label_placeholder_shown_and_not_focused-text_body" data-fathom="cc-firstname" data-ppui="true" data-testid="card-first-name" id="ccFirstName" name="ccFirstName" pattern="[a-zA-Z- .']+" placeholder=" " required="" type="text" value="Sophie"/>`,
+            `<input autocomplete="billing given-name cc-given-name" data-fathom="cc-firstname" id="first_name" maxlength="64" name="first_name" required="" title="First name" type="text" value=""/>`,
+            `<div class="form-control form-control_error form-control_large payment-method-form--first-name-on-card"><label><span class="form-control--label">First Name On Card <span class="form-control--required" aria-hidden="true"> *</span> </span><div><div class="input input_error input_icon input_left input_primary" style=""><input autocapitalize="none" autocomplete="section-billing billing cc-given-name" autocorrect="off" id="creditCardFirstNameOnCard" maxlength="30" spellcheck="false" aria-required="true" class="input--text" type="text" value="" aria-invalid="true" style=""><span class="swa-icon swa-icon_small input--icon input--icon_error swa-icon_error" icon="swa-icon_error" role="presentation"><span role="presentation" class="swa-icon--icon"></span></span></div></div><div class="form-control--errors"><div class="form-control--error swa-g-error">Enter first name on card.</div></div></label></div>`,
+            `<div data-testid="test-container" class="StyledContainer-VDS__sc-1nnt7hu-2 ifooRk"><label data-testid="test-label" id="08d7b602-c36c-4ff8-a766-e5b0bb4a6fc4-label" label="First name*" for="08d7b602-c36c-4ff8-a766-e5b0bb4a6fc4" class="LabelWrapper-VDS__sc-13hvypf-0 ioqEzv"><p id="08d7b602-c36c-4ff8-a766-e5b0bb4a6fc4-label-text" aria-hidden="false" class="StyledTypography-VDS__sc-15sxhse-0 bMDKrk StyledBody-VDS__sc-1x4uqr-0 bORdrY">First name*</p></label><span class="FlexedRowContainer-VDS__sc-1nnt7hu-10 gKrjow"><span class="FlexedColContainer-VDS__sc-1nnt7hu-11 dlcBSK"><span class="InputContainer-VDS__sc-1nnt7hu-3 bTTcbq"><div aria-live="off" class="InputWrapper-VDS__sc-1nnt7hu-9 bOeuNi"><input class="StyledInput-VDS__sc-1nnt7hu-5 lbxZgp" maxlength="40" data-testid="firstName" aria-label="First name*" aria-describedby="08d7b602-c36c-4ff8-a766-e5b0bb4a6fc4-error" id="08d7b602-c36c-4ff8-a766-e5b0bb4a6fc4" autocomplete="off" name="firstName" data-cs-mask="true" aria-required="true" form="creditDebitForm" required="" aria-invalid="false" type="text" aria-hidden="false" value="Proton" style="background-color: transparent;"></div></span><span aria-live="polite" aria-atomic="true" class="ScreenReaderText-VDS__sc-1nnt7hu-1 iizYPU"></span></span></span></div>`,
+        ];
+        fieldTest(CCFieldType.FIRSTNAME, samples);
+    });
+    describe("CCFieldType.LASTNAME", () => {
+        const samples = [
+            `<input aria-describedby="lastName-field-message" aria-invalid="false" autocomplete="cc-family-name" class="textbox__control textbox__control--fluid textbox__control--large" data-fathom="cc-lastname" id="lastName" name="lastName" type="text" value=""/>`,
+            `<input aria-describedby="lastName-field-message" aria-invalid="false" autocomplete="cc-family-name" class="textbox__control textbox__control--fluid textbox__control--large" data-fathom="cc-lastname" id="lastName" name="lastName" type="text" value=""/>`,
+            `<input aria-invalid="false" class="css-1j9pffl" data-fathom="cc-lastname" data-testid="new-card-last-name-field" id="lastName" name="lastName" placeholder="" type="text" value=""/>`,
+            `<input aria-invalid="false" class="xo-member-16mpn99-text_input_control-text_body-label_placeholder_shown_and_not_focused-text_body" data-fathom="cc-lastname" data-ppui="true" data-testid="card-last-name" id="ccLastName" name="ccLastName" pattern="[a-zA-Z- .']+" placeholder=" " required="" type="text" value="DOE"/>`,
+            `<input aria-invalid="false" class="xo-member-16mpn99-text_input_control-text_body-label_placeholder_shown_and_not_focused-text_body" data-fathom="cc-lastname" data-ppui="true" data-testid="card-last-name" id="ccLastName" name="ccLastName" pattern="[a-zA-Z- .']+" placeholder=" " required="" type="text" value="Doe"/>`,
+            `<input autocomplete="billing family-name cc-family-name" data-fathom="cc-lastname" id="last_name" maxlength="64" name="last_name" required="" title="Last name" type="text" value=""/>`,
+            `<div class="ComponentContainer-VDS__sc-1nnt7hu-0 doUbFs"><div data-testid="test-container" class="StyledContainer-VDS__sc-1nnt7hu-2 ifooRk"><label data-testid="test-label" id="d5878e2e-9eaa-4b10-948d-5457e6c53b6a-label" label="Last name*" for="d5878e2e-9eaa-4b10-948d-5457e6c53b6a" class="LabelWrapper-VDS__sc-13hvypf-0 ioqEzv"><p id="d5878e2e-9eaa-4b10-948d-5457e6c53b6a-label-text" aria-hidden="false" class="StyledTypography-VDS__sc-15sxhse-0 bMDKrk StyledBody-VDS__sc-1x4uqr-0 bORdrY">Last name*</p></label><span class="FlexedRowContainer-VDS__sc-1nnt7hu-10 gKrjow"><span class="FlexedColContainer-VDS__sc-1nnt7hu-11 dlcBSK"><span class="InputContainer-VDS__sc-1nnt7hu-3 bTTcbq"><div aria-live="off" class="InputWrapper-VDS__sc-1nnt7hu-9 bOeuNi"><input class="StyledInput-VDS__sc-1nnt7hu-5 lbxZgp" maxlength="40" data-testid="lastName" aria-label="Last name*" aria-describedby="d5878e2e-9eaa-4b10-948d-5457e6c53b6a-error" id="d5878e2e-9eaa-4b10-948d-5457e6c53b6a" autocomplete="off" name="lastName" data-cs-mask="true" aria-required="true" form="creditDebitForm" required="" aria-invalid="false" type="text" aria-hidden="false" value="Developer" style="background-color: transparent;"></div></span><span aria-live="polite" aria-atomic="true" class="ScreenReaderText-VDS__sc-1nnt7hu-1 iizYPU"></span></span></span></div></div>`,
+        ];
+        fieldTest(CCFieldType.LASTNAME, samples);
+    });
+    describe("CCFieldType.NAME", () => {
+        const samples = [
+            `<input addcontextualelement="true" aria-describedby="adyen-checkout-holderName-1710851944816-ariaError" aria-invalid="false" aria-required="true" autocomplete="cc-name" class="adyen-checkout__input adyen-checkout__input--text adyen-checkout__card__holderName__input CardInput-module_adyen-checkout__input__11tlB adyen-checkout__input--large" data-fathom="cc-name" id="adyen-checkout-holderName-1710851944816" name="holderName" placeholder="J. Smith" required="" type="text" value=""/>`,
+            `<input addcontextualelement="true" aria-describedby="adyen-checkout-holderName-1710851944816-ariaError" aria-invalid="false" aria-required="true" autocomplete="cc-name" class="adyen-checkout__input adyen-checkout__input--text adyen-checkout__card__holderName__input CardInput-module_adyen-checkout__input__11tlB adyen-checkout__input--large" data-fathom="cc-name" id="adyen-checkout-holderName-1710851944816" name="holderName" placeholder="J. Smith" required="" type="text" value=""/>`,
+            `<input aria-describedby="adyen-checkout-holderName-1710844611189-ariaError" aria-invalid="false" aria-required="true" autocomplete="cc-name" class="adyen-checkout__input adyen-checkout__input--text adyen-checkout__card__holderName__input CardInput-module_adyen-checkout__input__11tlB adyen-checkout__input--large" data-fathom="cc-name" id="adyen-checkout-holderName-1710844611189" name="holderName" placeholder="J. Smith" required="" type="text" value=""/>`,
+            `<input aria-describedby="ariaId_23" aria-labelledby="ariaId_24" aria-required="true" class="jfk-textinput b3id-text-input b3-text-input" data-fathom="cc-name" data-was-visible="true" name="cardHolderNameField" type="text"/>`,
+            `<input aria-describedby="error-creditCardHolderName" aria-required="true" class="text-input" data-fathom="cc-name" encrypt="false" id="input-creditCardHolderName" maxlength="50" name="field_creditCardHolderName" type="text" value=""/>`,
+            `<input aria-describedby="error-creditCardHolderName" aria-required="true" class="text-input" data-fathom="cc-name" encrypt="false" id="input-creditCardHolderName" maxlength="50" name="field_creditCardHolderName" type="text" value=""/>`,
+            `<input aria-describedby="error-creditCardHolderName" aria-required="true" class="text-input" data-fathom="cc-name" encrypt="false" id="input-creditCardHolderName" maxlength="50" name="field_creditCardHolderName" type="text" value=""/>`,
+            `<input aria-describedby="error-creditCardHolderName" aria-required="true" class="text-input" data-fathom="cc-name" encrypt="false" id="input-creditCardHolderName" maxlength="50" name="field_creditCardHolderName" type="text" value=""/>`,
+            `<input aria-describedby="error-for-name tooltip-for-name" aria-invalid="false" autocomplete="cc-name" class="input-placeholder-color--lvl-22" data-current-field="name" data-fathom="cc-name" id="name" inputmode="text" name="name" pattern="" placeholder="Name on card" required="" style='font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;letter-spacing:normal;line-height:1.5;color:rgb(0,0,0);text-decoration:none;text-transform:none;--placeholder-color:hsl(0,0%,44%);padding:calc((-1.5rem + max(2.35714rem,3.42857rem))/2) 0.785714rem;transition:padding 0.2s ease-out 0s' type="text" value=""/>`,
+            `<input aria-describedby="error-for-name tooltip-for-name" aria-invalid="false" autocomplete="cc-name" class="input-placeholder-color--lvl-22" data-current-field="name" data-fathom="cc-name" id="name" inputmode="text" name="name" pattern="" placeholder="Name on card" required="" style='font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;letter-spacing:normal;line-height:1.5;color:rgb(0,0,0);text-decoration:none;text-transform:none;--placeholder-color:hsl(0,0%,44%);padding:calc((-1.5rem + max(2.35714rem,3.42857rem))/2) 0.785714rem;transition:padding 0.2s ease-out 0s' type="text" value=""/>`,
+            `<input aria-describedby="error-for-name tooltip-for-name" aria-invalid="false" autocomplete="cc-name" class="input-placeholder-color--lvl-22" data-current-field="name" data-fathom="cc-name" id="name" inputmode="text" name="name" pattern="" placeholder="Nom sur la carte" required="" style='font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;letter-spacing:normal;line-height:1.5;color:rgb(0,0,0);text-decoration:none;text-transform:none;--placeholder-color:hsl(0,0%,44%);padding:calc((-1.5rem + max(2.35714rem,3.42857rem))/2) 0.785714rem;transition:padding 0.2s ease-out 0s' type="text" value=""/>`,
+            `<input aria-invalid="false" aria-label="Card holder" autocomplete="cc-name" autocorrect="off" class="sc-hIagIn sc-kjOQFR bUpLMa gkMlpk" data-fathom="cc-name" data-testid="cardholderNameInput" id="cardHolder" name="cardHolder" placeholder="" spellcheck="false" type="text" value=""/>`,
+            `<input aria-invalid="false" autocomplete="cc-name" autocorrect="off" class="CheckoutInput Input Input--empty" data-1p-ignore="false" data-fathom="cc-name" id="billingName" name="billingName" placeholder="Full name on card" spellcheck="false" type="text" value=""/>`,
+            `<input aria-invalid="false" autocomplete="cc-name" autocorrect="off" class="CheckoutInput Input" data-1p-ignore="false" data-fathom="cc-name" id="billingName" name="billingName" placeholder="Full name on card" spellcheck="false" type="text" value="DOE John"/>`,
+            `<input aria-label="Cardholder name" class="css-1cab8vv" data-ds--text-field--input="true" data-fathom="cc-name" data-testid="stripe-cc-name" name="cardholderName" value=""/>`,
+            `<input aria-label="Name on card" autocomplete="cc-name" autocorrect="off" data-fathom="cc-name" id="name" maxlength="50" name="name" placeholder="First and Last" required="" value=""/>`,
+            `<input autocomplete="cc-name" class="form-control" data-fathom="cc-name" id="cardholder-name" maxlength="50" name="nameoncard" required="" type="text" value=""/>`,
+            `<input autocomplete="cc-name" data-fathom="cc-name" id="Ecom_CardHolderName" maxlength="45" name="Ecom_CardHolderName" type="text" value=""/>`,
+            `<input autocomplete="off" class="a-input-text a-form-normal apx-add-credit-card-account-holder-name-input mcx-input-fields" data-fathom="cc-name" id="pp-3XyMeN-19" maxlength="50" name="ppw-accountHolderName" spellcheck="false" type="text" value=""/>`,
+            `<input autocomplete="off" class="a-input-text a-form-normal apx-add-credit-card-account-holder-name-input mcx-input-fields" data-fathom="cc-name" id="pp-4MEsHB-19" maxlength="50" name="ppw-accountHolderName" spellcheck="false" type="text" value=""/>`,
+            `<input autocomplete="off" class="a-input-text a-form-normal apx-add-credit-card-account-holder-name-input mcx-input-fields" data-fathom="cc-name" id="pp-Ka9je1-19" maxlength="50" name="ppw-accountHolderName" spellcheck="false" type="text" value=""/>`,
+            `<input autocomplete="off" class="a-input-text a-form-normal apx-add-credit-card-account-holder-name-input mcx-input-fields" data-fathom="cc-name" id="pp-v9rInZ-19" maxlength="50" name="ppw-accountHolderName" spellcheck="false" type="text" value=""/>`,
+            `<input autocomplete="on" autocorrect="off" class="styles__StyledInput-sc-zltd9a-12 fIVrBe axiom-checkout-element-disabled" data-fathom="cc-name" id="credit-card-name-input" maxlength="40" minlength="1" name="credit-card-name-input" type="text" value=""/>`,
+            `<input class="comet-input comet-input-lg" data-fathom="cc-name" data-meta="Field" direction="ltr" id="cardHolder" label="Cardholder name" placeholder="" type="text" value=""/>`,
+            `<input class="no-success-validation" data-fathom="cc-name" data-val="true" data-val-maxlength="Le nom du titulaire ne doit pas dépasser 62 caractères." data-val-maxlength-max="62" data-val-required="Le nom du titulaire est obligatoire" id="CardHolder" maxlength="62" name="CardHolder" placeholder="Prénom et nom" tabindex="3" type="text" value=""/>`,
+            `<div class="form-cell layout-wide"><label class="form-cell-name">Name on card</label><input type="text" class="form-text is-wide" aria-label="Name on card" value="" maxlength="80"><span class="form-error-message undefined" style="display:none"></span></div>`,
+            `<input name="cardname" id="cardname" tabindex="1" type="text" placeholder="Prenume Nume" required="" autocomplete="off" maxlength="36" data-res-key="lang.placeholders.ownerName" value="">`,
+            `<div><label for="cardname">Nume detinator card:</label><input name="cardname" id="cardname" type="text" size="10" maxlength="255" value="MC3" placeholder="Nume Prenume"><div class="image-help" style="display:none"></div></div>`,
+        ];
+        fieldTest(CCFieldType.NAME, samples);
+    });
+    describe("Outliers", () => {
+        const samples = [
+            `<div class="input input_icon input_left input_primary input_read-only list-box--input" style=""><input aria-autocomplete="list" aria-controls="creditCardCountry--menu" aria-expanded="false" aria-owns="creditCardCountry--menu" autocapitalize="none" autocomplete="section-billing billing country-name" autocorrect="off" id="creditCardCountry" readonly="" role="combobox" spellcheck="false" aria-required="true" class="input--text" type="text" value="United States of America" style=""><span class="swa-icon swa-icon_small input--icon input--icon_dark swa-icon_arrow-down-solid" icon="swa-icon_arrow-down-solid" role="presentation"><span role="presentation" class="swa-icon--icon"></span></span></div>`,
+            `<div class="input input_error input_icon input_left input_primary input_read-only list-box--input" style=""><input aria-autocomplete="list" aria-controls="creditCardType--menu" aria-expanded="false" aria-owns="creditCardType--menu" autocapitalize="none" autocomplete="off" autocorrect="off" id="creditCardType" readonly="" role="combobox" spellcheck="false" aria-required="true" class="input--text" type="text" value="Select" aria-invalid="true" style=""><span class="swa-icon swa-icon_small input--icon input--icon_dark input--icon_error swa-icon_error" icon="swa-icon_error" role="presentation"><span role="presentation" class="swa-icon--icon"></span></span></div>`,
+            `<div class=" a b c f bb" style=""><input class="kz bt f bu apc bv arr bx ya di ca kq ars cc cd ce cf cg ch ci cj ck cl cm cn co cp cq cr cs ct cu cv cw shipping-firstName" data-testid="shipping-firstName" id="shipping.firstName" type="text" aria-required="true" maxlength="15" inputmode="text" aria-label="name input" name="shipping.firstName" style="" value=""><label class=" ya bp bv aln di alo apm ox ze cy" for="shipping.firstName">First Name</label></div>`,
+            `<div class=" a b c f bb" style=""><input class="kz bt f bu af bv bw bx by di ca kq cb cc cd ce cf cg ch ci cj ck cl cm cn co cp cq cr cs ct cu cv cw shipping-lastName" data-testid="shipping-lastName" id="shipping.lastName" type="text" aria-required="true" maxlength="15" inputmode="text" aria-label="name input" name="shipping.lastName" value="" style=""><label class=" lh bp bv aln di alo alp ox ze cy" for="shipping.lastName">Last Name</label></div>`,
+            `<div class="DateInput DateInput_1"><input class="DateInput_input DateInput_input_1 DateInput_input__readOnly DateInput_input__readOnly_2" aria-label="Date of issue" type="text" id="passenger[Adult1][passportIssuedDate]" name="passenger[Adult1][passportIssuedDate]" placeholder="Date of issue" autocomplete="off" readonly="" required="" aria-describedby="DateInput__screen-reader-message-passenger[Adult1][passportIssuedDate]" value="04-11-2025"><p class="DateInput_screenReaderMessage DateInput_screenReaderMessage_1" id="DateInput__screen-reader-message-passenger[Adult1][passportIssuedDate]">Press the down arrow key to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.</p></div>`,
+            `<div class="DateInput DateInput_1"><input class="DateInput_input DateInput_input_1 DateInput_input__readOnly DateInput_input__readOnly_2" aria-label="Expiry date" type="text" id="passenger[Adult1][passportExpDate]" name="passenger[Adult1][passportExpDate]" placeholder="Expiry date" autocomplete="off" readonly="" required="" aria-describedby="DateInput__screen-reader-message-passenger[Adult1][passportExpDate]" value="04-11-2037"><p class="DateInput_screenReaderMessage DateInput_screenReaderMessage_1" id="DateInput__screen-reader-message-passenger[Adult1][passportExpDate]">Press the down arrow key to interact with the calendar andselect a date. Press the question mark key to get the keyboard shortcuts for changing dates.</p></div>`,
+            `<li class="m-passenger-form__item item-given item-given-new with-guide-icon"><label class="m-passenger-form__label animate-label title-animate is-focus" style="">Vorname(n)<span class="required-star">*</span></label><div class="ipt-overflow" style=""><input data-ignorechecktext="true" data-testid="u_givenname_isolated_pax_form_input" class="ipt-overflow__input c-book-ipt" autocomplete="off" aria-autocomplete="none" type="text" placeholder="Z.&nbsp;B. MAX" name="passenger_givennames" role="textbox" aria-label="Vorname(n)" value="" style="padding-right: 1px;"></div><div class="input_icon_guide input_icon_guide__givenname" data-testid="input_icon_guide__givenname" tabindex="0" aria-label="Richtlinien für Passagiernamen anzeigen" role="tooltip"><i class="fi-icon fi-icon_question-line"></i></div></li>`,
+            `<li class="m-passenger-form__item no-right with-guide-icon" data-surname="first-surname"><label class="m-passenger-form__label animate-label title-unanimate" style="">Nachname<span class="required-star">*</span></label><div class="ipt-overflow" style=""><input data-ignorechecktext="true" data-testid="u_surname_isolated_pax_form_input" class="ipt-overflow__input c-book-ipt" autocomplete="off" aria-autocomplete="none" type="text" placeholder="Nachname" role="textbox" aria-label="Nachname" name="passenger_surname" value="" style="padding-right: 1px;"></div><div class="input_icon_guide input_icon_guide__surname" data-testid="input_icon_guide__surname" tabindex="0" aria-label="Richtlinien für Passagiernamen anzeigen" role="tooltip"><i class="fi-icon fi-icon_question-line"></i></div></li>`,
+            `<div class="DateInput DateInput_1"><input class="DateInput_input DateInput_input_1 DateInput_input__readOnly DateInput_input__readOnly_2" aria-label="Expiry date" type="text" id="passenger[Adult1][passportExpDate]" name="passenger[Adult1][passportExpDate]" placeholder="Expiry date" autocomplete="off" readonly="" required="" aria-describedby="DateInput__screen-reader-message-passenger[Adult1][passportExpDate]" value="04-11-2037"><p class="DateInput_screenReaderMessage DateInput_screenReaderMessage_1" id="DateInput__screen-reader-message-passenger[Adult1][passportExpDate]">Press the down arrow key to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.</p></div>`,
+            `<div class="form-textbox is-error" style=""> <label id="checkout.billing.billingOptions.selectedBillingOptions.creditCard.billingAddress.address.lastName_label" for="checkout.billing.billingOptions.selectedBillingOptions.creditCard.billingAddress.address.lastName" class="form-textbox-label">Apellidos</label><input id="checkout.billing.billingOptions.selectedBillingOptions.creditCard.billingAddress.address.lastName" name="lastName" type="text" class="form-textbox-input" aria-labelledby="checkout.billing.billingOptions.selectedBillingOptions.creditCard.billingAddress.address.lastName_label" aria-invalid="true" maxlength="20" required="" aria-required="true" autocomplete="family-name" data-autom="form-field-lastName" value="" style="" aria-describedby="checkout.billing.billingOptions.selectedBillingOptions.creditCard.billingAddress.address.lastName_error "><div><div class="is-error"><div aria-live="polite" class="form-message-wrapper" id="checkout.billing.billingOptions.selectedBillingOptions.creditCard.billingAddress.address.lastName_error"><span class="form-message" data-autom="form-field-lastName-error">Introduce tus apellidos.</span></div></div></div></div>`,
+            `<div class="form-textbox is-error" style=""> <label id="checkout.billing.billingOptions.selectedBillingOptions.creditCard.billingAddress.address.firstName_label" for="checkout.billing.billingOptions.selectedBillingOptions.creditCard.billingAddress.address.firstName" class="form-textbox-label">Nombre(s)</label><input id="checkout.billing.billingOptions.selectedBillingOptions.creditCard.billingAddress.address.firstName" name="firstName" type="text" class="form-textbox-input" aria-labelledby="checkout.billing.billingOptions.selectedBillingOptions.creditCard.billingAddress.address.firstName_label" aria-invalid="true" maxlength="14" required="" aria-required="true" autocomplete="given-name" data-autom="form-field-firstName" value="" style="" aria-describedby="checkout.billing.billingOptions.selectedBillingOptions.creditCard.billingAddress.address.firstName_error "><div><div class="is-error"><div aria-live="polite" class="form-message-wrapper" id="checkout.billing.billingOptions.selectedBillingOptions.creditCard.billingAddress.address.firstName_error"><span class="form-message" data-autom="form-field-firstName-error">Introduce tu nombre.</span></div></div></div></div>`,
+            `<label for="expirationTimeModeToggle" class="toggle-label on-mobile-mb0-5"><input id="expirationTimeModeToggle" type="checkbox" class="toggle-checkbox sr-only on-mobile-mb0-5" aria-busy="false" data-testid="sharing-modal-expirationTimeModeToggle"><span class="toggle-label-text" aria-hidden="true"><svg viewBox="0 0 16 16" class="icon-16p toggle-label-img" role="img" focusable="false" aria-hidden="true"><use xlink:href="#ic-cross"></use></svg></span><span class="toggle-label-text" aria-hidden="true"><svg viewBox="0 0 16 16" class="icon-16p toggle-label-img" role="img" focusable="false" aria-hidden="true"><use xlink:href="#ic-checkmark"></use></svg></span></label>`,
+            `<input aria-autocomplete="list" aria-controls="nngdp225" aria-disabled="false" aria-expanded="false" aria-haspopup="true" aria-label="Cardholder name" aria-owns="nngdp225" autocomplete="off" class="whsOnd zHQkBf" data-fathom="cc-name" data-initial-value="M. John DOE" dir="ltr" jsname="YPqjbf" role="combobox" tabindex="0" type="search" value="M. John DOE"/>`,
+            `<span class="fui-Input r1oeeo9n ___p5lntn0 f1w5jphr fk6fouc fod5ikn figsok6 faaz57k fjuset5 f1eyhf9v f1f5gg8d fvcxoqz f1ub3y4t f1l4zc64 f1m52nbi f8vnjqi fz1etlk f1klwx88 f1hc16gm f1g0x7ka f1vdfbxk f1qch9an fy77jfu f1vtxj0l"><span class="fui-Input__contentBefore r1572tok ___xfmmu60 f16u2scb"><label for="floatingLabelInput31" class="fui-Label ___9kur9g0 fk6fouc fxc4j92 fkhj508 f1i3iumi fxugw4r f113hnb5 f1ahpp82 f10pi13n f1g0x7ka f7x41pl f1qch9an fruq291">Code</label></span><input type="text" placeholder="" id="floatingLabelInput31" aria-describedby="field-32__validationMessage" class="fui-Input__input r12stul0 ___j4z8wj0 fk8j09s flt1dlf" value="" data-fathom="otp"></span>`,
+        ];
+        fieldTest(undefined, samples);
+    });
+    describe("IFrame fields", () => {
+        const samples = [
+            `gpay-card-info-iframe gpay-card-info-iframe-fade-in`,
+            `Iframe for card number     js-iframe`,
+            `Iframe for expiry date     js-iframe`,
+            `Iframe for security code     js-iframe`,
+            ` __privateStripeController0502    `,
+            ` __privateStripeMetricsController0500    `,
+            ` __privateStripeMetricsController0501    `,
+            `Credit Card Form   z_hppm_iframe  z_hppm_iframe`,
+            ` __privateStripeMetricsController5920    `,
+            `Field container for: Card number card-fields-number-2l5zeh65wl500000-scope-shop.app  card-fields-number-2l5zeh65wl500000-scope-shop.app  card-fields-iframe`,
+            `Field container for: Expiration date (MM / YY) card-fields-expiry-5bf46k0f3se00000-scope-shop.app  card-fields-expiry-5bf46k0f3se00000-scope-shop.app  card-fields-iframe`,
+            `Field container for: Security code card-fields-verification_value-2bvzgatvups00000-scope-shop.app  card-fields-verification_value-2bvzgatvups00000-scope-shop.app  card-fields-iframe`,
+            `Field container for: Name on card card-fields-name-4vzt21xngh600000-scope-shop.app  card-fields-name-4vzt21xngh600000-scope-shop.app  card-fields-iframe`,
+            `Secure Credit Card Frame - Credit Card Number braintree-hosted-field-number  braintree-hosted-field-number  `,
+            `Secure Credit Card Frame - Expiration Date braintree-hosted-field-expirationDate  braintree-hosted-field-expirationDate  `,
+            `Secure Credit Card Frame - CVV braintree-hosted-field-cvv  braintree-hosted-field-cvv  `,
+            `Secure card number input frame __privateStripeFrame5156    `,
+            `Secure expiration date input frame __privateStripeFrame5158    `,
+            `Secure CVC input frame __privateStripeFrame51510    `,
+            `Secure postal code input frame __privateStripeFrame51512    `,
+            `pbf   ppfnfnclspbfiframe  `,
+            ` __privateStripeFrame6254    `,
+            ` __privateStripeFrame6256    `,
+            `Iframe for card number     js-iframe`,
+            `Iframe for expiry date     js-iframe`,
+            `Iframe for security code     js-iframe`,
+            ` __privateStripeFrame82012    `,
+            `payment   z_hppm_iframe  z_hppm_iframe`,
+            `pbf   ppfnfnclspbfiframe  `,
+            `Secure card payment input frame __privateStripeFrame3426    `,
+            `Secure card number input frame __privateStripeFrame6316    `,
+            `Secure expiration date input frame __privateStripeFrame6317    `,
+            `Card Number     `,
+            `Cadre pour le champ : Numéro de carte card-fields-number-5v94wkg9xhy00000-scope-quintalatelier.com  card-fields-number-5v94wkg9xhy00000-scope-quintalatelier.com  card-fields-iframe`,
+            `Cadre pour le champ : Date d'expiration (MM/AA) card-fields-expiry-2y8iutbx2e700000-scope-quintalatelier.com  card-fields-expiry-2y8iutbx2e700000-scope-quintalatelier.com  card-fields-iframe`,
+            `Cadre pour le champ : Code de sécurité card-fields-verification_value-ze8ur8zcc7000000-scope-quintalatelier.com  card-fields-verification_value-ze8ur8zcc7000000-scope-quintalatelier.com  card-fields-iframe`,
+            `Cadre pour le champ : Nom sur la carte card-fields-name-ls9q1tjz48900000-scope-quintalatelier.com  card-fields-name-ls9q1tjz48900000-scope-quintalatelier.com  card-fields-iframe`,
+            `Iframe for secured card data input field     js-iframe`,
+            `Iframe for secured card data input field     js-iframe`,
+            `Iframe for secured card data input field     js-iframe`,
+            `pbf   ppfnfnclspbfiframe  `,
+            `Iframe for card number     js-iframe`,
+            `Iframe for expiry date     js-iframe`,
+            `Iframe for security code     js-iframe`,
+            `Field container for: Card number card-fields-number-47vw1lseu9v00000-scope-shop.app  card-fields-number-47vw1lseu9v00000-scope-shop.app  card-fields-iframe`,
+            `Field container for: Expiration date (MM / YY) card-fields-expiry-uc490i0xgcg00000-scope-shop.app  card-fields-expiry-uc490i0xgcg00000-scope-shop.app  card-fields-iframe`,
+            `Field container for: Security code card-fields-verification_value-5alv784wbd400000-scope-shop.app  card-fields-verification_value-5alv784wbd400000-scope-shop.app  card-fields-iframe`,
+            `Field container for: Name on card card-fields-name-55k63u93i5f00000-scope-shop.app  card-fields-name-55k63u93i5f00000-scope-shop.app  card-fields-iframe`,
+            `   pl-pm-cards_5-cardNumber  pl-input`,
+            `   pl-pm-cards_5-cvv  pl-input`,
+            `Field container for: Card number card-fields-number-vhty8y3068000000-scope-www.wellplayed.ch  card-fields-number-vhty8y3068000000-scope-www.wellplayed.ch  card-fields-iframe`,
+            `Field container for: Expiration date (MM / YY) card-fields-expiry-mgzi5pnyejm00000-scope-www.wellplayed.ch  card-fields-expiry-mgzi5pnyejm00000-scope-www.wellplayed.ch  card-fields-iframe`,
+            `Field container for: Security code card-fields-verification_value-vagob27302g00000-scope-www.wellplayed.ch  card-fields-verification_value-vagob27302g00000-scope-www.wellplayed.ch  card-fields-iframe`,
+            `Field container for: Name on card card-fields-name-d1ddq1gt5pk00000-scope-www.wellplayed.ch  card-fields-name-d1ddq1gt5pk00000-scope-www.wellplayed.ch  card-fields-iframe`,
+            `Credit card form     `,
+            ` cb-component-number-0  card-number_frame  `,
+            ` cb-component-expiry-1  card-expiry_frame  `,
+            ` cb-component-cvv-2  card-cvc_frame  `,
+            `Iframe for secured card data input field     js-iframe`,
+            `Iframe for secured card data input field     js-iframe`,
+            `Iframe for secured card data input field     js-iframe`,
+            `Iframe for card number     js-iframe`,
+            `Iframe for expiry date     js-iframe`,
+            `Iframe for security code     js-iframe`,
+            `Cadre de saisie sécurisé pour le paiement __privateStripeFrame2578    `,
+            `   payment-iframe  `,
+            ` __privateStripeFrame2577    `,
+            ` __privateStripeFrame25710    `,
+            `pbf   ppfnfnclspbfiframe  `,
+            `Uber - Payment options payments_hub    `,
+            `Secure card payment input frame __privateStripeFrame5316    `,
+            ` __privateStripeFrame53114    `,
+            ` __privateStripeFrame53116    `,
+            `pbf   ppfnfnclspbfiframe  `,
+            `Secure card number input frame __privateStripeFrame4816    `,
+            `Secure expiration date input frame __privateStripeFrame4818    `,
+            `Secure CVC input frame __privateStripeFrame48110    `,
+            `checkout-frames-cardNumber checkout-frames-cardNumber  cardNumber  `,
+            `checkout-frames-expiryDate checkout-frames-expiryDate  expiryDate  `,
+            `checkout-frames-cvv checkout-frames-cvv  cvv  `,
+            ` checkout-frames  controllerFrame  `,
+            `Secure payment input frame __privateStripeFrame4728    `,
+            ` __privateStripeFrame4727    `,
+            ` __privateStripeFrame47210    `,
+            `unzer-cvc-iframe-1766399979648 unzerUIIframe __privateUnzerFrame--unzer-cvc-iframe-1766399979648 https://payment.unzer.com/v1/cardframe/cvc;jsessionid=0AE216B03E0E03399C9CB845FAD51147?locale=fr`,
+        ];
+        test.each(samples.map((haystack) => ({ haystack, preview: haystack.substring(0, 42) })))("$preview", ({ haystack }) => {
+            expect(matchIFrameField(sanitizeStringWithSpaces(haystack))).toBe(true);
+        });
+    });
+});