how to use input forms within iframes with Puppeteer?

I'm a little bit new to puppeteer and have been getting along with it quite well until I have encountered iframes and inputting data into them.

I'm trying to interact with an input named credit-card-number on the checkout.game.co.uk/payment page.

I have tried the following:

const iframe1 = await page.frames().find(frame => frame.src =="https://flex.cybersource.com/cybersource/assets/microform/0.4.0/iframe.html?keyId=03MksUg0hQKucIBmvTgEVkD7Vxh8h9S0");
await iframe1.type('input', '4111', { delay: 500 }); 

For credit card number, how can I input numbers into this box? Additionally, any feedback on how I can smarten up the code since I have been told to use functions but not sure how they all combine with puppeteer.

My Code:

const puppeteer = require('puppeteer');


(async () => {
  //go to page and add to cart
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://www.game.co.uk/en/dual-charging-station-for-xbox-series-x-s-white-2851669');
  await console.log('Users navigated to site :)');
  await page.waitForSelector('.cookiePolicy_inner--actions');
  await page.click('.cookiePolicy_inner--actions');
  await page.waitForSelector('.addToBasket');
  await page.click('.addToBasket');
  await page.waitForSelector('.secure-checkout');
  await page.click('.secure-checkout');
  await page.waitForSelector('.cta-large');
  await page.click('.cta-large');

  //start filling out basic details
  await page.goto('https://checkout.game.co.uk/contact');
  await page.waitForSelector('.mat-form-field-infix');
  await page.click('.mat-form-field-infix');
  //title
  await page.waitForSelector('#mat-option-0');
  await page.click('#mat-option-0');
  await page.waitForTimeout(1000);
  //first name
  var ele = await page.waitForXPath("//input[@placeholder='First Name']");
  await ele.type('jim');
  await page.waitForTimeout(1000);
  //lastname
  var ele2 = await page.waitForXPath("//input[@placeholder='Last Name']");
  await ele2.type('jim');
  await page.waitForTimeout(1000);
  //email
  var elemail = await page.waitForXPath("//input[@placeholder='Email']");
  await elemail.type('jim@gmail.com');
  await page.waitForTimeout(1000);
  //mobile number
  var elenumber = await page.waitForXPath("//input[@placeholder='Mobile Number']");
  await elenumber.type('07797818233', { delay: 200});
  await page.waitForTimeout(1000);
  //starts filling out adress
  await page.click('.mat-raised-button.mat-accent-cta');
  var manualadress = await page.waitForXPath("//a[@data-test='manual-address-link']");
  await manualadress.click();
  await page.waitForTimeout(1000);
  //Country
  var choosecountry = await page.waitForXPath("//mat-select[@placeholder='Choose a Country']");
  await choosecountry.click();
  await page.waitForSelector('#mat-option-6');
  await page.click('#mat-option-6');
  //address line 1
  var addline1 = await page.waitForXPath("//input[@placeholder='Address Line 1']");
  await addline1.type('40 close du ross');
  await page.waitForTimeout(1000);
  //address line 2
  var addline2 = await page.waitForXPath("//input[@placeholder='Address Line 2']");
  await addline2.type('Grande Voute');
  await page.waitForTimeout(1000);
  // Town/city
  var town = await page.waitForXPath("//input[@placeholder='Town / City']");
  await town.type('clamont');
  await page.waitForTimeout(1000);
  //County / State / Region
  var region = await page.waitForXPath("//input[@placeholder='County / State / Region']");
  await region.type('ci');
  await page.waitForTimeout(1000);
  //Postcode
  var postcode = await page.waitForXPath("//input[@placeholder='Postcode / ZIP']");
  await postcode.type('SE1 9SG');
  await page.waitForTimeout(1000);
  //button to next
  var addresscontinue = await page.waitForXPath("//button[@data-test='continue-button']");
  await addresscontinue.click();
  await page.waitForTimeout(1000);

  //Delivery options
  //Continue to payment, keep just this for Standard
  var dstandard = await page.waitForXPath("//button[@data-test='continue-to-payment']");
  await dstandard.click();
  await page.waitForTimeout(1000);

  //Card Details
  //Card Number
})();

from Recent Questions - Stack Overflow https://ift.tt/3mtlYx0
https://ift.tt/eA8V8J