Closed
Bug 1653915
Opened 4 years ago
Closed 4 years ago
[Apple.com] Address and CC autofill no longer works
Categories
(Toolkit :: Form Autofill, defect, P1)
Toolkit
Form Autofill
Tracking
()
RESOLVED
FIXED
People
(Reporter: tbabos, Unassigned)
References
(Blocks 2 open bugs, )
Details
(Whiteboard: [cc-autofill-reserve])
Attachments
(1 file)
|
3.14 MB,
video/mp4
|
Details |
Affected version:
All - if CC specific prefs are enabled
Tested on:
Windows 10
Steps to reproduce:
- Reach the payment form on apple.com
- Check the autofill dropdown for the shipping address and the payment form
Expected results:
- Address and CC autofill should be functional
Actual results:
- Address and CC autofill doesn't work
Regression-range
This is a regression due to site changes, field values changed and also checked back to a date where it used to work but with an issue, for example: Bug 1645741
Notes:
CC number field value:
<input value="" aria-required="true" aria-labelledby="recon-0-187-label " aria-describedby="recon-0-187-error" aria-invalid="true" data-autom="card-number-input" type="tel" maxlength="16" class=" form-textbox-input" id="recon-0-187" name="recon-0-187" required="" autocomplete="off">
|
||
Updated•4 years ago
|
Whiteboard: [ccautofill]
Assign this to P2 because of the site traffic
https://docs.google.com/spreadsheets/d/10V0bnw5nWM52ouADYM6H89B43v2JHKZaV1m3YZ8kiw0/edit#gid=0
Priority: -- → P2
|
|
||
Updated•4 years ago
|
Whiteboard: [ccautofill] → [cc-autofill-mvp]
|
||
Comment 2•4 years ago
|
||
Full HTML fragment:
<div class="as-paymentoptions">
<div class="as-paymentoptions-group as-paymentoptions-group-payinfull">
<div class="as-paymentoptions-legend large-6 small-12">
<h2 class="as-paymentoptions-header">Pay in full.</h2>
</div>
<div class="as-paymentoptions-item as-paymentoptions-item-creditcard">
<div class="row as-paymentoptions-item-container">
<div class="column large-6 small-12">
<div class="form-selector" id="checkout.billing.billingOptions.options.0-selector">
<input value="CREDIT" data-autom="checkout-billingOptions-CREDIT" aria-describedby="checkout-billingOptions-CREDIT
checkout-billingOptions-creditCard" type="radio" class=" form-selector-input rounded" id="checkout.billing.billingOptions.options.0" name="checkout.billing.billingOptions.selectBillingOption" checked="true">
<label for="checkout.billing.billingOptions.options.0" class="form-selector-label">
<div class="row">
<div class="form-selector-left-col">
<div class="form-selector-title">Credit or Debit Card</div>
<div class="form-label-small">Visa, Mastercard, AMEX, Discover, UnionPay, Barclaycard Visa</div>
</div>
<div class="form-selector-right-col"></div>
</div>
</label>
</div>
</div>
<div class="column large-6 small-12">
<div class="as-supplementalinfo" id="checkout-billingOptions-CREDIT"></div>
</div>
</div>
<div aria-hidden="false" class="rr-accordion rr-accordion-shown" id="recon-0-297" style="">
<div class="as-util-fadeaccordion-content">
<div class="as-creditcard">
<div>
<div class="column small-12 large-6">
<div class="as-creditcard-title">Enter your card information:</div>
</div>
</div>
<div>
<div class="row">
<div class="column small-12 large-6">
<div>
<div class="as-creditcard-input">
<div class="rr-formatter">
<div class="form-textbox is-error">
<input value="" aria-required="true" aria-labelledby="recon-0-282-label " aria-describedby="recon-0-282-error" aria-invalid="true" data-autom="card-number-input" type="tel" maxlength="16" class=" form-textbox-input" id="recon-0-282" name="recon-0-282" required="" autocomplete="off"><span aria-hidden="true" class="form-textbox-label"><span id="recon-0-282-label" class="as-textfield-label">Credit/Debit Card Number</span></span>
<div>
<div id="recon-0-282-error" class="form-message-wrapper"><span>Please enter a valid card number.</span></div>
<div id="recon-0-282-warn" class="form-message-warning"><span></span></div>
</div>
</div>
</div>
<ul class="as-creditcard-cardimages">
<li data-logo="VISA" aria-hidden="true" class="as-creditcardlogo as-creditcard-cardimage"><span class="visuallyhidden">VISA</span></li>
<li data-logo="MASTERCARD" aria-hidden="true" class="as-creditcardlogo as-creditcard-cardimage"><span class="visuallyhidden">MASTERCARD</span></li>
<li data-logo="AMERICAN_EXPRESS" aria-hidden="true" class="as-creditcardlogo as-creditcard-cardimage"><span class="visuallyhidden">AMERICAN EXPRESS</span></li>
<li data-logo="DISCOVER" aria-hidden="true" class="as-creditcardlogo as-creditcard-cardimage"><span class="visuallyhidden">DISCOVER</span></li>
<li data-logo="CHINA_UNIONPAY" aria-hidden="true" class="as-creditcardlogo as-creditcard-cardimage"><span class="visuallyhidden">CHINA UNIONPAY</span></li>
</ul>
</div>
<div class="row form-textbox-sidebyside">
<div class="column large-9 small-12">
<div class="rr-formatter">
<div class="form-textbox">
<input value="" aria-required="true" aria-labelledby="recon-0-281-label " aria-describedby="" aria-invalid="false" type="tel" maxlength="5" class=" form-textbox-input" id="recon-0-281" name="recon-0-281" required="" autocomplete="off"><span aria-hidden="true" class="form-textbox-label"><span id="recon-0-281-label" class="as-textfield-label">Expiration MM/YY</span></span>
<div aria-hidden="true">
<div id="recon-0-281-error" class="form-message-wrapper"><span></span></div>
<div id="recon-0-281-warn" class="form-message-warning"><span></span></div>
</div>
</div>
</div>
</div>
<div class="column large-3 small-6 as-creditcard-securityfield">
<div class="rr-formatter form-tooltip-textbox-wrapper form-icons-focusable pattern-tooltip-after-textbox">
<div class="form-textbox form-tooltip-right-textbox-wrapper">
<input value="" aria-required="true" aria-labelledby="recon-0-279-label " aria-describedby="" aria-invalid="false" type="tel" maxlength="4" class=" form-textbox-input" id="recon-0-279" name="recon-0-279" required="" autocomplete="off"><span aria-hidden="true" class="form-textbox-label"><span id="recon-0-279-label" class="as-textfield-label">CVV</span></span>
<div aria-hidden="true">
<div id="recon-0-279-error" class="form-message-wrapper"><span></span></div>
<div id="recon-0-279-warn" class="form-message-warning"><span></span></div>
</div>
</div>
<div class="rr-tooltip form-tooltip form-tooltip-show form-tooltip-after">
<button data-trigger-click="focus" aria-label="How to find the CVV" aria-describedby="recon-0-286" class="form-tooltip-button"><span aria-hidden="true" class="form-icons form-icons-info19"></span></button>
<div>
<div role="tooltip" id="recon-0-286" class="rr-materializer rr-materializer-hiding rr-materializer-hidden">
<div class="form-tooltip-info form-tooltip-pointer-right">
<div class="form-tooltip-content">
<div>
<div class="as-creditcard-cvv as-creditcard-cvv-generic"></div>
<p class="form-tooltip-title">How to find the CVV</p>
<p class="form-tooltip-content">Visa, Mastercard, Discover, and UnionPay display the three-digit CVV number on the back of the card, to the right of the signature.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="as-creditcard-split">
<div class="row">
<div class="column large-6 small-12"><button aria-controls="recon-0-287" aria-expanded="false" data-autom="pay-with-single-card" aria-describedby="undefined-info" id="recon-0-288-0" type="button" class="rr-toggle as-creditcard-splittoggle as-buttonlink icon icon-after icon-chevrondown ">Split payment with a second card</button></div>
<div class="column large-6 small-12">
<div class="as-supplementalinfo" id="undefined-info">To split your payment, both cards must share the same billing address.</div>
</div>
</div>
<div class="as-creditcard-split-input">
<div aria-hidden="true" class="rr-accordion rr-accordion-hidden" id="recon-0-287">
<div role="img" aria-label="Processing " class="waitindicator waitindicator24-gray as-creditcard-moduleloading"></div>
</div>
</div>
</div>
<div class="as-creditcard-address">
<div class="as-creditcard-keyline large-6 small-12"></div>
<div>
<div class="column as-creditcard-addressfields large-12 small-12">
<div class="as-creditcard-credit-address">
<h3 class="as-creditcard-address-subheader">Billing Address</h3>
<div class="as-address-layout row as-address-edit as-util-fadein">
<div class="as-address-section">
<div class="row as-address-container">
<div class="as-address-fields">
<div class="large-12 row">
<div class="column as-address-rowfields large-6 small-12 as-address-wrapper-countrycode">
<div class="column large-12 small-12 as-address-field
as-address-countrycode form-dropdown">
<div class="">
<select value="US" aria-required="true" aria-describedby="recon-0-290-countryCode-error" aria-invalid="true" data-autom="address-field-countryCode" class=" form-dropdown-select" id="recon-0-290-countryCode" required="" autocomplete="false">
<option value="AU">Australia</option>
<option value="CA">Canada</option>
<option value="CN">China</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
<option value="IT">Italy</option>
<option value="MX">Mexico</option>
<option value="NL">Netherlands</option>
<option value="NZ">New Zealand</option>
<option value="ES">Spain</option>
<option value="SE">Sweden</option>
<option value="GB">United Kingdom</option>
<option value="US" selected="true">United States</option>
</select>
<span aria-hidden="true" class="form-dropdown-chevron"></span><label for="recon-0-290-countryCode" class="form-dropdown-label">Country/Region</label>
<div aria-live="polite" id="recon-0-290-countryCode-error" class="form-message-wrapper"></div>
</div>
</div>
</div>
</div>
<div class="large-12 row">
<div class="column as-address-rowfields large-6 small-12 as-address-wrapper-firstname">
<div class="column large-12 small-12 as-address-field
as-address-firstname form-texbox">
<div class="">
<div class="form-textbox">
<input value="" aria-required="true" aria-labelledby="recon-0-270-label " aria-describedby=" " aria-invalid="false" data-autom="address-field-firstName" data-trigger-return="false" type="text" maxlength="14" class=" form-textbox-input" id="recon-0-270" name="recon-0-270" required="" autocomplete="on"><span aria-hidden="true" class="form-textbox-label"><span id="recon-0-270-label" class="as-textfield-label">First Name</span></span>
<div aria-hidden="true">
<div id="recon-0-270-error" class="form-message-wrapper"><span></span></div>
<div id="recon-0-270-warn" class="form-message-warning"><span></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="large-12 row">
<div class="column as-address-rowfields large-6 small-12 as-address-wrapper-lastname">
<div class="column large-12 small-12 as-address-field
as-address-lastname form-texbox">
<div class="">
<div class="form-textbox">
<input value="" aria-required="true" aria-labelledby="recon-0-269-label " aria-describedby=" " aria-invalid="false" data-autom="address-field-lastName" data-trigger-return="false" type="text" maxlength="20" class=" form-textbox-input" id="recon-0-269" name="recon-0-269" required="" autocomplete="on"><span aria-hidden="true" class="form-textbox-label"><span id="recon-0-269-label" class="as-textfield-label">Last Name</span></span>
<div aria-hidden="true">
<div id="recon-0-269-error" class="form-message-wrapper"><span></span></div>
<div id="recon-0-269-warn" class="form-message-warning"><span></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="large-12 row">
<div class="column as-address-rowfields large-6 small-12 as-address-wrapper-street">
<div class="column large-12 small-12 as-address-field
as-address-street form-texbox">
<div class="">
<div class="form-textbox">
<input value="" aria-required="true" aria-labelledby="recon-0-272-label " aria-describedby=" " aria-invalid="false" data-autom="address-field-street" data-trigger-return="false" type="text" maxlength="30" class=" form-textbox-input" id="recon-0-272" name="recon-0-272" required="" autocomplete="on"><span aria-hidden="true" class="form-textbox-label"><span id="recon-0-272-label" class="as-textfield-label">Street Address</span></span>
<div aria-hidden="true">
<div id="recon-0-272-error" class="form-message-wrapper"><span></span></div>
<div id="recon-0-272-warn" class="form-message-warning"><span></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="large-12 row">
<div class="column as-address-rowfields large-6 small-12 as-address-wrapper-street2">
<div class="column large-12 small-12 as-address-field
as-address-street2 form-texbox">
<div class="">
<div class="form-textbox">
<input value="" aria-required="false" aria-labelledby="recon-0-268-label " aria-describedby=" " aria-invalid="false" data-autom="address-field-street2" data-trigger-return="false" type="text" maxlength="30" class=" form-textbox-input" id="recon-0-268" name="recon-0-268" autocomplete="on"><span aria-hidden="true" class="form-textbox-label"><span id="recon-0-268-label" class="as-textfield-label">Apt, Suite, Building (Optional)</span></span>
<div aria-hidden="true">
<div id="recon-0-268-error" class="form-message-wrapper"><span></span></div>
<div id="recon-0-268-warn" class="form-message-warning"><span></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="large-12 row">
<div class="column as-address-rowfields large-12 small-12 as-address-wrapper-ziplookup">
<fieldset class="column as-address-sublayout large-12">
<div class="large-12 row">
<div class="column as-address-rowfields form-textbox-sidebyside large-6 small-12 as-address-wrapper-postalcode">
<div class="column large-12 small-12 as-address-field
as-address-postalcode form-texbox">
<div class="">
<div class="rr-formatter">
<div class="form-textbox">
<input value="" aria-required="true" aria-labelledby="recon-0-275-label " aria-describedby=" " aria-invalid="false" data-autom="address-field-postalCode" data-trigger-return="false" type="tel" maxlength="10" class=" form-textbox-input" id="recon-0-275" name="recon-0-275" required="" autocomplete="off"><span aria-hidden="true" class="form-textbox-label"><span id="recon-0-275-label" class="as-textfield-label">Zip Code</span></span>
<div aria-hidden="true">
<div id="recon-0-275-error" class="form-message-wrapper"><span></span></div>
<div id="recon-0-275-warn" class="form-message-warning"><span></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="column large-12 small-12 as-address-field
as-address-ziplookupcitystate form-dropdown">
<div class="">
<select value="" aria-required="true" aria-describedby="recon-0-296-zipLookupCityState-error" aria-invalid="true" data-autom="address-field-zipLookupCityState" class=" form-dropdown-select form-dropdown-selectnone" disabled="" id="recon-0-296-zipLookupCityState" required="" autocomplete="false"></select><span aria-hidden="true" class="form-dropdown-chevron"></span><label for="recon-0-296-zipLookupCityState" class="form-dropdown-label">City, State</label>
<div aria-live="polite" id="recon-0-296-zipLookupCityState-error" class="form-message-wrapper"></div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="as-paymentoptions-item as-paymentoptions-item-applepay">
<div class="row as-paymentoptions-item-container">
<div class="column large-6 small-12">
<div class="form-selector" id="checkout.billing.billingOptions.options.4-selector">
<input value="APPLE_PAY" data-autom="checkout-billingOptions-APPLE_PAY" aria-describedby="checkout-billingOptions-APPLE_PAY
checkout-billingOptions-applePay" type="radio" class=" form-selector-input rounded" id="checkout.billing.billingOptions.options.4" name="checkout.billing.billingOptions.selectBillingOption">
<label for="checkout.billing.billingOptions.options.4" class="form-selector-label">
<div class="row">
<div class="form-selector-left-col">
<div class="as-paymentoptions-image as-paymentoptions-image-applepay"></div>
<span class="visuallyhidden">Apple Pay</span>
</div>
<div class="form-selector-right-col"><span class="rs-payment-applepay-setuprequired rs-payment-applepay-sidelabel">Setup Required</span></div>
</div>
</label>
</div>
</div>
</div>
<div aria-hidden="true" class="rr-accordion rr-accordion-hidden" id="recon-0-300">
<div class="as-util-fadeaccordion-content"><span class="rs-payment-applepay-setuprequired rs-payment-applepay-details">You’ll be able to set up Apple Pay on the Review step. </span></div>
</div>
</div>
<div class="as-paymentoptions-item as-paymentoptions-item-paypal">
<div class="row as-paymentoptions-item-container">
<div class="column large-6 small-12">
<div class="form-selector" id="checkout.billing.billingOptions.options.2-selector">
<input value="PAYPAL" data-autom="checkout-billingOptions-PAYPAL" aria-describedby="checkout-billingOptions-PAYPAL
checkout-billingOptions-payPal" type="radio" class=" form-selector-input rounded" id="checkout.billing.billingOptions.options.2" name="checkout.billing.billingOptions.selectBillingOption">
<label for="checkout.billing.billingOptions.options.2" class="form-selector-label">
<div class="row">
<div class="form-selector-left-col"><img aria-hidden="true" src="https://as-images.apple.com/is/paymentoptions-paypal-logo?hei=100&fmt=png-alpha&op_usm=0.5,0.5&.v=1574113296662" alt="PayPal" class="ir as-paymentoptions-banklogos" height="27"><span class="visuallyhidden">PayPal</span></div>
<div class="form-selector-right-col"></div>
</div>
</label>
</div>
</div>
</div>
<div aria-hidden="true" class="rr-accordion rr-accordion-hidden" id="recon-0-299">
<div class="row">
<div class="column large-6 small-12">
<div role="img" aria-label="Processing " class="waitindicator waitindicator24-gray as-paymentoptions-moduleloading as-paymentoptions-moduleloading-paypal"></div>
</div>
</div>
</div>
</div>
</div>
<div class="as-paymentoptions-group as-paymentoptions-group-payovertime">
<div class="as-paymentoptions-legend large-6 small-12">
<h2 class="as-paymentoptions-header">Pay over time.</h2>
</div>
<div class="as-paymentoptions-item as-paymentoptions-item-barclayfinance">
<div class="row as-paymentoptions-item-container">
<div class="column large-6 small-12">
<div class="form-selector" id="checkout.billing.billingOptions.options.1-selector">
<input value="BARCLAY_FINANCE" data-autom="checkout-billingOptions-BARCLAY_FINANCE" aria-describedby="checkout-billingOptions-BARCLAY_FINANCE
checkout-billingOptions-barclayFinance" type="radio" class=" form-selector-input rounded" id="checkout.billing.billingOptions.options.1" name="checkout.billing.billingOptions.selectBillingOption">
<label for="checkout.billing.billingOptions.options.1" class="form-selector-label">
<div class="row">
<div class="form-selector-left-col">
<div class="form-selector-title">Barclaycard Financing Visa®</div>
<div class="form-label-small">Apply for up to 18 months of special financing.</div>
</div>
<div class="form-selector-right-col"></div>
</div>
</label>
</div>
</div>
<div class="column large-6 small-12">
<div class="as-supplementalinfo" id="checkout-billingOptions-BARCLAY_FINANCE">
<div class="rs-load-fadein"><span aria-label="Already applied for Barclaycard Visa registered with Apple Rewards?" class="rs-payment-barclaycard-supplementalinfo">Already applied?</span><button value="" class=" as-buttonlink rs-payment-barclaycard-status more">Check your status or access your credit<span class="visuallyhidden">for Barclaycard Visa with Apple Rewards (opens an external link)</span></button></div>
</div>
</div>
</div>
<div aria-hidden="true" class="rr-accordion rr-accordion-hidden" id="recon-0-298">
<div class="as-util-fadeaccordion-content">
<div class="rs-payment-barclaycard large-6 small-12">
<div>
<p class="list-title"><strong>Barclaycard Financing Visa®</strong></p>
<ul class="list">
<li>
Get special financing on Apple purchases made within the first 30 days of opening your account, if paid in full within the promo period:
<ul class="list">
<li>Spend less than $499: Get 6 months special financing</li>
<li>Spend $499 to less than $999: Get 12 months special financing</li>
<li>Spend $999 or more: Get 18 months special financing</li>
</ul>
</li>
</ul>
</div>
<div class="rs-payment-barclaycard-para">
<p>See <a target="_blank" href="https://www.barclaycardus.com/apply/action/tncContent?prodidreq=CCVPS80764">terms and conditions<span class="visuallyhidden"> (opens in a new window)</span></a> for details.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="as-paymentoptions-group as-paymentoptions-group-giftcard">
<div class="as-paymentoptions-item as-paymentoptions-item-giftcard">
<div class="as-util-fadeaccordion-content">
<div class="row">
<div aria-live="polite"></div>
<div class="column large-6 small-12">
<div class="rs-payment-giftcard">
<p class="rs-payment-giftcard-header">Apply an Apple Gift Card:</p>
<div class="rs-payment-giftcard-pin">
<button value="" data-autom="enter-giftcard-number" aria-describedby="rs-checkout-payment-giftcard" aria-controls="gift-card-accordion" aria-expanded="false" class=" rs-payment-giftcard-toggle as-buttonlink as-util-fadein">Enter your gift card number<span aria-hidden="true" class="icon icon-after icon-chevrondown"></span></button>
<div aria-hidden="true" class="rr-accordion rr-accordion-hidden" id="gift-card-accordion">
<div>
<div data-trigger-context="true" class="row as-util-fadeaccordion-content as-inlineeditor as-inlineeditor-collapsible">
<div class="column as-inlineeditor-container">
<div class="form-textbox"><input data-autom="gift-card-pin" type="text" class="form-textbox-input"></div>
</div>
<div class="column as-inlineeditor-cancel">
<button data-autom="gift-card-cancel" type="button" class=" form-textbox-sidebutton">
<div><span aria-hidden="false">Cancel</span><span class="visuallyhidden"></span></div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="column large-6 small-12">
<div class="as-supplementalinfo " id="rs-checkout-payment-giftcard">You can use up to 8 Apple Gift Cards. However, gift cards can’t be used with Apple Pay, PayPal, or split credit card payments.</div>
</div>
</div>
</div>
</div>
</div>
</div>
Notice lack of <form> element, there is none.
|
|
||
Updated•4 years ago
|
Priority: P2 → P1
Whiteboard: [cc-autofill-mvp] → [cc-autofill-reserve]
|
||
Comment 3•4 years ago
|
||
The severity field is not set for this bug.
:MattN, could you have a look please?
For more information, please visit auto_nag documentation.
Flags: needinfo?(MattN+bmo)
|
|
||
Updated•4 years ago
|
Severity: -- → S2
Flags: needinfo?(MattN+bmo)
|
|
||
Comment 4•4 years ago
|
||
I tested it against today's nightly and the CC autofill did work for me.
Timea, can you repro?
Flags: needinfo?(timea.babos)
|
Reporter | |
Comment 5•4 years ago
|
||
I can also no longer reproduce the issue on Apple.com on Win10 and MacOS. Form autofill works just fine now. The only issue I see is when you select to split payment option. After the second form is also autofilled the first one is no longer recognized as an autofilled form, but I guess thats an edge case to be handled in a different issue.
Flags: needinfo?(timea.babos)
|
|
||
Comment 6•4 years ago
|
||
Thank you! I'll mark it as fixed and we can file a separate bug for the minor issue.
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
You need to log in
before you can comment on or make changes to this bug.
Description
•