accessing elements inside an iframe with puppeteer 1.20

What are you trying to achieve?

I am trying fill an input field inside an iframe with puppeteer 1.20 and codecptjs 2.32

What do you get instead?

with puppeteer 1.20 codeceptjs does not find the input inside the iframe. with puppeteer 1.19, it’s working perfectly

test source code

    I.amOnPage('https://pac.com/');
    await within({frame: "#pac-card-field-cardNumber > iframe"}, () => {
        I.fillField("input[name=\"cardnumber\"]", "4012001037484447");
    });

result with puppeteer 1.19

> codeceptjs-c@1.0.0 pacon /home/mtoure/workspace/nr-stage
> codeceptjs run --grep @pacon --verbose

headless=false
env=stage
browser=chrome
CodeceptJS v2.3.2
Using test root "/home/mtoure/workspace/nr-stage"
Helpers: Puppeteer, REST, Mochawesome, FileSystem, puppeteerHelper, fileHelper
Plugins: screenshotOnFail, stepByStepReport, retryFailedStep, allure

Provider pacON @pacon --
    [1] Starting recording promises
    Emitted | suite.before ([object Object])
 › [Session] Starting singleton browser session
  Transaction by api Hpacment with a VISA @visa
    Emitted | test.before ([object Object])
 › [Dir] /home/mtoure/workspace/nr-stage
    Emitted | test.start ([object Object])
    Emitted | step.before (I am on page "https://pac.com/")
    Emitted | step.after (I am on page "https://pac.com/")
    Emitted | step.start (I am on page "https://pac.com/")
    I am on page "https://pac.com/"
    › [Url] https://pac.com/
    › [Browser:Log] pac Javascript SDK v1.9.1JSHandle:pac Javascript SDK v1.9.1
    › Screenshot is saving to /home/mtoure/workspace/nr-stage/output/record_6d0d1ad42898ab0fd80d8b4babbb14c7/0000.png
    Emitted | step.passed (I am on page "https://pac.com/")
    Emitted | step.finish (I am on page "https://pac.com/")
    [1] Starting <within> session
    Emitted | step.before (I fill field "input[name="cardnumber"]", "4012001037484447")
    Emitted | step.after (I fill field "input[name="cardnumber"]", "4012001037484447")
    Emitted | step.start (I fill field "input[name="cardnumber"]", "4012001037484447")
    Emitted | step.comment (Within "{"frame":"#pac-card-field-cardNumber > iframe"}" )
    Within "{"frame":"#pac-card-field-cardNumber > iframe"}"
      I fill field "input[name="cardnumber"]", "4012001037484447"
      › Screenshot is saving to /home/mtoure/workspace/nr-stage/output/record_6d0d1ad42898ab0fd80d8b4babbb14c7/0001.png
    Emitted | step.passed (I fill field "input[name="cardnumber"]", "4012001037484447")
    Emitted | step.finish (I fill field "input[name="cardnumber"]", "4012001037484447")
    [1] <within> Finalize <within> session
    Emitted | test.passed ([object Object])
    Emitted | test.finish ([object Object])
  ✔ OK in 7853ms

    Emitted | test.after ([object Object])
  › [Session] cleaning cookies and localStorage
    Emitted | suite.after ([object Object])

  OK  | 1 passed   // 10s
Process finished with exit code 0

result with puppeteer 1.20

> codeceptjs-c@1.0.0 pacon /home/mtoure/workspace/nr-stage
> codeceptjs run --grep @pacon --verbose

headless=false
env=stage
browser=chrome
CodeceptJS v2.3.2
Using test root "/home/mtoure/workspace/nr-stage"
Helpers: Puppeteer, REST, Mochawesome, FileSystem, puppeteerHelper, fileHelper
Plugins: screenshotOnFail, stepByStepReport, retryFailedStep, allure

Provider pacON @pacon --
    [1] Starting recording promises
    Emitted | suite.before ([object Object])
 › [Session] Starting singleton browser session
  Transaction by api Hpacment with a VISA @visa
    Emitted | test.before ([object Object])
 › [Dir] /home/mtoure/workspace/nr-stage
    Emitted | test.start ([object Object])
    Emitted | step.before (I am on page "https://pac.com/")
    Emitted | step.after (I am on page "https://pac.com/")
    Emitted | step.start (I am on page "https://pac.com/")
    I am on page "https://pac.com/"
    › [Url] https://pac.com/
    › [Browser:Log] pac Javascript SDK v1.9.1JSHandle:pac Javascript SDK v1.9.1
    › [Url]
    › [Url] https://libs.pac.com/hostedfields/index.html#type=carousel&element=carousel&instanceId=714712&referrer=https://pac.com
    › [Url]
    › [Url]
    › [Url]
    › [Url]
    › [Url]
    › Screenshot is saving to /home/mtoure/workspace/nr-stage/output/record_6d0d1ad42898ab0fd80d8b4babbb14c7/0000.png
    › [Url] https://libs.pac.com/hostedfields/index.html#type=card&element=controller&instanceId=862569&referrer=https://pac.com
    › [Url] https://libs.pac.com/hostedfields/index.html#type=card&element=cardHolder&instanceId=862569&referrer=https://pac.com
    › [Url] https://libs.pac.com/hostedfields/index.html#type=card&element=cardNumber&instanceId=862569&referrer=https://pac.com
    › [Url] https://libs.pac.com/hostedfields/index.html#type=card&element=expiryDate&instanceId=862569&referrer=https://pac.com
    Emitted | step.passed (I am on page "https://pac.com/")
    Emitted | step.finish (I am on page "https://pac.com/")
    [1] Starting <within> session
    Emitted | step.before (I fill field "input[name="cardnumber"]", "4012001037484447")
    Emitted | step.after (I fill field "input[name="cardnumber"]", "4012001037484447")
 › [Url] https://libs.pac.com/hostedfields/index.html#type=card&element=cvc&instanceId=862569&referrer=https://pac.com
    Emitted | step.start (I fill field "input[name="cardnumber"]", "4012001037484447")
    Emitted | step.comment (Within "{"frame":"#pac-card-field-cardNumber > iframe"}" )
    Within "{"frame":"#pac-card-field-cardNumber > iframe"}"
      I fill field "input[name="cardnumber"]", "4012001037484447"
    [1] <within> Retrying... Attempt #2
    [1] <within> Retrying... Attempt #3
    [1] <within> Retrying... Attempt #4
    [1] <within> Retrying... Attempt #5
    [1] <within> Retrying... Attempt #6
    [1] <within> Error | Error: Field "input[name="cardnumber"]" was not found by text|CSS|XPath
    Emitted | step.failed (I fill field "input[name="cardnumber"]", "4012001037484447")
      › Screenshot is saving to /home/mtoure/workspace/nr-stage/output/record_6d0d1ad42898ab0fd80d8b4babbb14c7/0001.png
    Emitted | step.finish (I fill field "input[name="cardnumber"]", "4012001037484447")
    [1] <within> Error | Error: Field "input[name="cardnumber"]" was not found by text|CSS|XPath
    [1] <within> Error | Error: Field "input[name="cardnumber"]" was not found by text|CSS|XPath
    [1] <within> Starting <teardown> session
    Emitted | test.failed ([object Object])
    Emitted | test.finish ([object Object])
    [1] <teardown> Stopping recording promises
  › <screenshotOnFail> Test failed, saving screenshot
  › Screenshot is saving to /home/mtoure/workspace/nr-stage/output/Transactio_1569482685.failed.png
  ✖ FAILED in 10346ms

    [2] Starting recording promises
    Emitted | test.after ([object Object])
  › [Session] cleaning cookies and localStorage
    Emitted | suite.after ([object Object])

-- FAILURES:

  1) Provider pacON @pacon
       Transaction by api Hpacment with a VISA @visa:
     Field "input[name="cardnumber"]" was not found by text|CSS|XPath

  Scenario Steps:

  - I.fillField("input[name="cardnumber"]", "4012001037484447") at within (tests/Acceptance/Providers/pacon.js:28:11)
  - I.amOnPage("https://pac.com/") at Test.Scenario (tests/Acceptance/Providers/pacon.js:26:3)

  Error: Field "input[name="cardnumber"]" was not found by text|CSS|XPath
      at new ElementNotFound (node_modules/codeceptjs/lib/helper/errors/ElementNotFound.js:14:11)
      at assertElementExists (node_modules/codeceptjs/lib/helper/Puppeteer.js:2266:11)
      at Puppeteer.fillField (node_modules/codeceptjs/lib/helper/Puppeteer.js:1071:5)
      at process._tickCallback (internal/process/next_tick.js:68:7)


  FAIL  | 0 passed, 1 failed   // 13s
    Emitted | global.result ([object Object])
◉ Step-by-step preview: file:///home/mtoure/workspace/nr-stage/output/records.html
    Emitted | global.after ([object Object])
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! codeceptjs-c@1.0.0 pacon: `codeceptjs run --grep @pacon --verbose`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the codeceptjs-c@1.0.0 pacon script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/mtoure/.npm/_logs/2019-09-26T07_24_49_116Z-debug.log

Process finished with exit code 1

Details

• CodeceptJS version:2.32
• Operating System: Ubuntu 18
• Puppeteer: 1.20

[PeterNgTr]

@medtoure18 @samaysimantbarik seems like it is an issue when accessing the iframe in headful mode, headless mode works fine.

  Emitted | step.start (I fill field "input[name="ccname"]", "4012001037484447")
    Emitted | step.comment (Within "{"frame":"#hipay-card-field-cardHolder > iframe"}" )
    Within "{"frame":"#hipay-card-field-cardHolder > iframe"}" 
      I fill field "input[name="ccname"]", "4012001037484447"
    Emitted | step.passed (I fill field "input[name="ccname"]", "4012001037484447")
    Emitted | step.finish (I fill field "input[name="ccname"]", "4012001037484447")
    [1] Finalize <within> session
    Emitted | test.passed ([object Object])
    Emitted | test.finish ([object Object])
  ✔ OK in 76361ms

That would be the fix from puppeteer itself, I believe. As it is logged here https://github.com/GoogleChrome/puppeteer/issues/4964

In the meantime, I would say either use puppeteer 1.19.0 or running 1.20.0 with headless mode.

[medtoure18]

@PeterNgTr the right url is this one: https://demo-front-test-dot-pi-poc-224414.appspot.com/ I.amOnPage('https://demo-front-test-dot-pi-poc-224414.appspot.com/'); await within({frame: "#pac-card-field-cardNumber > iframe"}, () => { I.fillField("input[name=\"cardnumber\"]", "4012001037484447"); });