Type value is wrong in iframe inputs

[dellow]

In one of my Dusk tests I'm testing a Stripe elements form. When I switch to the iframe for the card number it 9 times out of 10 inputs the number incorrectly. If I use a non iframe input everything works fine.

A sample of my test:

/** @test */
public function it_can_save_a_card()
{
  $this->browse(function ($browser) {
    $browser->loginAs($this->user)
      ->visit('/account/business/billing')
      ->type('name', 'Mr Test User')
      ->type('noniframecardnumber', '4242424242424242');

    $browser->click('#stripe-card-number');
    $browser->waitFor('#stripe-card-number iframe', 15);
    $browser->driver->switchTo()->frame($browser->script('return $("#stripe-card-number iframe").attr("name");')[0]);
    $browser->type('cardnumber', '4242424242424242');

    $browser->driver->switchTo()->defaultContent();
  });
}

The failure screenshot (I included a standard input at the bottom):

Any ideas why this might be happening?

Thanks.

[staudenmeir]

Does the Stripe iframe have any JavaScript?

[dellow]

Yea the Stripe Elements drop in is pretty Javascript heavy. For example, it validates credit card numbers on the fly and also formats the output with spaces and such.

I forgot to mention, this test is pretty old and has always worked fine until recently. That said I understand something could have changed within Stripe just as much as it could have Dusk.

[staudenmeir]

Could be a timing issue, maybe Dusk is typing too fast.

Try a pause after each character:

foreach (str_split('4242424242424242') as $char) {
    $browser->append('cardnumber', $char)->pause(100);
}

[dellow]

That got it. Thanks so much.