Hi Grafana Community,
I’m using the K6 browser module to automate a flow that involves interacting with a Stripe payment iframe. The test script works fine up to the point of locating the iframe. However, typing into its fields (like card number, expiry date, cvc etc.) inside the iframe doesn’t seem to work.
The script sometimes works as expected, allowing me to type values into the fields (e.g., card number, expiry date). However, the behavior is inconsistent—at times, the script does not type into the fields, and there are no errors or exceptions in the logs.
Here’s a simplified version of my code:
// Stripe Card number field
const iframeCardElement = await page.$('iframe[src*="componentName=cardNumber"]');
const cardIframe = await iframeCardElement.contentFrame();
if (!!cardIframe) {
await cardIframe.waitForSelector('input[name="cardnumber"]', {state: 'visible'});
await cardIframe.click('input[name="cardnumber"]');
await cardIframe.type('input[name="cardnumber"]', '4242 4242 4242 4242');
}
// Stripe Card expiry field
const iframeExpiryElement = await page.$('iframe[src*="componentName=cardExpiry"]');
const expIframe = await iframeExpiryElement.contentFrame();
if (!!expIframe) {
await expIframe.waitForSelector('input[name="exp-date"]', {state: 'visible'});
await expIframe.click('input[name="exp-date"]');
await expIframe.type('input[name="exp-date"]', '12 / 25');
}
// Stripe CVC Field
const iframeCvcElement = await page.$('iframe[src*="componentName=cardCvc"]');
const cvcIframe = await iframeCvcElement.contentFrame();
if(!!cvcIframe) {
await cvcIframe.waitForSelector('input[name="cvc"]', {state: 'visible'});
await cvcIframe.click('input[name="cvc"]');
await cvcIframe.type('input[name="cvc"]', '123');
}
and i also tried below code
await page.waitForSelector('iframe[src*="componentName=cardNumber"]', { visible: true, timeout: 30000 });
const iframeCardElement = await page.$('iframe[src*="componentName=cardNumber"]');
const visible = await iframeCardElement.isVisible();
if (visible) {
const cardIframe = await iframeCardElement.contentFrame();
const field = await cardIframe.locator('input[name="cardnumber"]');
await field.waitFor({ state: 'visible' });
if (field.isVisible()) {
await field.type('4242 4242 4242 4242');
}
}
Observed Behavior:
- The script runs without errors but doesn’t type into the card number field inside the iframe.
Questions:
- Is there a specific way to interact with iframes in the K6 browser module that I might be missing?
- Are there any known limitations or workarounds for interacting with Stripe iframes specifically?
- Could this be related to browser focus or sandboxing in Stripe’s implementation?
Any guidance or tips would be greatly appreciated!
Thanks in advance!