How to perform an interaction after switching to an iFrame?

[ChandanHackerrank]

What happened?

I am switching to jupyter ide iframe

When('{pronoun} switches to Jupyter IDE iFrame', async (actor: Actor) => {
  await actor.attemptsTo(Switch.to(DataScienceIdePage.ideIframe()));
});

and performing some ide related validations.

Once I complete validation I want to click on submit button which is outside the ide iFrame. (i.e. inside main page) but I am getting below error

  ✗ <<Submit Code Button>>.click() (1m 51s 715ms)
        Error: locator.click: Frame was detached
        =========================== logs ===========================
        waiting for locator('xpath=//button[.=\'Submit\']')
        ============================================================

What did you expect to happen?

Once iFrame related operations are done I want to perform actions on main page objects, which is not happening.

Node.js version

v18.18.2

Execution environment

MAc OS
Chrome

How to reproduce the bug.

Switch to iFrame and then click on any other element outside iFrame

Serenity/JS version

"@playwright/test": "^1.39.0",
    "@serenity-js/assertions": "^3.11.1",
    "@serenity-js/console-reporter": "^3.11.1",
    "@serenity-js/core": "^3.11.1",
    "@serenity-js/cucumber": "^3.11.1",
    "@serenity-js/playwright": "^3.11.1",
    "@serenity-js/rest": "^3.11.1",
    "@serenity-js/serenity-bdd": "^3.11.1",
    "@serenity-js/web": "^3.11.1",
    "@types/node": "^20.8.2",
    "@typescript-eslint/eslint-plugin": "^6.18.1",
    "@typescript-eslint/parser": "^6.18.1",
    "axe-html-reporter": "2.2.3",
    "axios": "1.5.0",
    "clipboardy": "^4.0.0",
    "dotenv": "16.3.1",
    "eslint": "^8.50.0",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "eslint-plugin-unicorn": "^48.0.1",
    "eslint-plugin-unused-imports": "^3.0.0",
    "fs": "^0.0.2",
    "http-server": "^14.1.1",
    "is-ci": "^3.0.1",
    "link-module-alias": "^1.2.0",
    "mailgun.js": "^9.2.1",
    "mkdirp": "^3.0.1",
    "npm-failsafe": "^1.0.0",
    "playwright": "^1.38.1",
    "playwright-core": "^1.38.1",
    "prettier-config-hackerrank": "^2.0.0",
    "rimraf": "^5.0.5",
    "simple-git": "3.22.0",
    "stripe": "14.13.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.2.2",
    "uuid": "9.0.1",
    "pixelmatch": "^5.3.0",
    "pngjs": "^7.0.0"
  },
  "_moduleAliases": {
    "@actors": "common-files/Actors.ts",
    "@models": "common-files/models",
    "@helpers": "common-files/helpers",
    "@common_pages": "common-files/pages",
    "@custom_interactions": "common-files/custom-interactions",
    "@tasks": "common-files/tasks",
    "@utils": "common-files/utils",
    "@config": "common-files/config"
  },
  "dependencies": {
    "axe-html-reporter": "^2.2.3",
    "stripe": "^14.14.0"
  }

[ChandanHackerrank]

page.reload() is also not working after switching context to iFrame

[jan-molak]

Hi @ChandanHackerrank, if you have a look at the examples in the Switch.to(..) API docs, you'll notice that they follow this pattern:

 await actorCalled('Francesca')
   .attemptsTo(
     Switch.to(LoginForm.iframe).and(                                          // <-- notice the "and"
       Enter.theValue('francesca@example.org').into(LoginForm.usernameField()),
       Enter.theValue('correct-horse-battery-staple').into(LoginForm.passwordField()),
       Click.on(LoginForm.submitButton()),
     )
   )

The idea is that Switch.to(iframe).and(activities) receives a sequence of activities and then automatically switches back when the last one completes.

Does this help?