├── .gitignore ├── README.md ├── cypress.json ├── cypress ├── fixtures │ └── example.json ├── integration │ └── iframes.spec.js ├── plugins │ └── index.js └── support │ ├── commands.js │ └── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # general 2 | node_modules 3 | package-lock.json 4 | 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Descomplicando iFrames com Cypress 2 | 3 | Aplicação de exemplo: http://demo.automationtesting.in/Frames.html 4 | 5 | Vídeo: https://youtu.be/LQCcwl6kuRU 6 | 7 | # Projeto 8 | 9 | Neste pequeno projeto, você aprenderá a: 10 | 11 | - Tentar interagir com elemento dentro do iframe (sem trocar contexto) 12 | - Conferir se iframe foi carregado em tela após acesso 13 | - Iframes dentro de iFrames 14 | - Interagir com elemento dentro do iframe (trocando contexto) 15 | - Executar algumas ações dentro do iframe (enter) 16 | - Interagir com elemento de iframe dentro de iframe 17 | 18 | 19 | Veja os exemplos deste projeto em: cypress/integration/iframes.spec.js 20 | 21 | # Instalação 22 | 23 | ```sh 24 | npm install -D cypress 25 | npm install -D cypress-iframe 26 | ``` 27 | 28 | # Materiais complementares 29 | 30 | - Documentação Cypress iFrame - https://www.npmjs.com/package/cypress-iframe 31 | - Working with iframes in Cypress - Gleb Bahmutov - https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/ 32 | - Testing Iframes with Cypress - https://www.mariedrake.com/post/testing-iframes-with-cypress 33 | - Cypress .within - https://docs.cypress.io/api/commands/within 34 | 35 | 36 | # Bugs conhecidos 37 | 38 | - Test Runner não exibe o conteúdo do iframe no *Time Travel* 39 | - Issues abertas no repositório do plugin - https://gitlab.com/kgroat/cypress-iframe/-/issues 40 | 41 | 42 | --- 43 | 44 | *Importante* : o suporte nativo a iframes está no ROADMAP priorizado do Cypress. 45 | 46 | Veja em: https://docs.cypress.io/guides/references/roadmap#Upcoming-features 47 | 48 | Se você gostou deste conteúdo, deixe seu ⭐️ 49 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } 6 | -------------------------------------------------------------------------------- /cypress/integration/iframes.spec.js: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | context('Iframes', () => { 4 | beforeEach(() => { 5 | cy.visit('http://demo.automationtesting.in/Frames.html') 6 | }) 7 | 8 | it.skip('Tentar interagir com elemento dentro do iframe (sem trocar contexto)', () => { 9 | // esse teste ficará com o .skip, serve apenas para entender o motivo 10 | // de trocarmos de contexto para interagir com os iframes 11 | cy.get('input[type=text]') 12 | .first() 13 | .should('be.visible') 14 | .type('bora agilizar') 15 | 16 | }); 17 | 18 | it('Conferir se iframe foi carregado em tela após acesso', () => { 19 | 20 | cy.frameLoaded('#singleframe') 21 | 22 | }) 23 | 24 | it('Iframes dentro de iFrames', () => { 25 | cy.get('a.analystic[href$=Multiple]').click() 26 | 27 | cy.frameLoaded('[src*=SingleFrame]') 28 | cy.frameLoaded('[src*=MultipleFrames]') 29 | 30 | }); 31 | 32 | it('Interagir com elemento dentro do iframe (trocando contexto)', () => { 33 | 34 | cy.iframe('[src*=SingleFrame]') 35 | .find('input[type=text]') 36 | .should('be.visible') 37 | .type('bora agilizar') 38 | 39 | }); 40 | 41 | it('Executar algumas ações dentro do iframe (enter)', () => { 42 | 43 | cy.enter('[src*=SingleFrame]').then(body => { 44 | body() 45 | .find('input[type=text]') 46 | .should('be.visible') 47 | .type('bora agilizar hehe') 48 | }) 49 | 50 | }); 51 | 52 | it('Interagir com elemento de iframe dentro de iframe', () => { 53 | 54 | cy.get('a.analystic[href$=Multiple]').click() 55 | 56 | // assim não funciona, precisa navegar na estrutura 57 | // cy.iframe('[src*=SingleFrame]') 58 | // .find('input[type=text]') 59 | // .should('be.visible') 60 | // .type('bora agilizar') 61 | 62 | cy.iframe('[src*=MultipleFrames]').within(() => { 63 | cy.iframe('[src*=SingleFrame]') 64 | .find('input[type=text]') 65 | .should('be.visible') 66 | .type('bora agilizar') 67 | }) 68 | 69 | }); 70 | 71 | }) -------------------------------------------------------------------------------- /cypress/plugins/index.js: -------------------------------------------------------------------------------- 1 | /// 2 | // *********************************************************** 3 | // This example plugins/index.js can be used to load plugins 4 | // 5 | // You can change the location of this file or turn off loading 6 | // the plugins file with the 'pluginsFile' configuration option. 7 | // 8 | // You can read more here: 9 | // https://on.cypress.io/plugins-guide 10 | // *********************************************************** 11 | 12 | // This function is called when a project is opened or re-opened (e.g. due to 13 | // the project's config changing) 14 | 15 | /** 16 | * @type {Cypress.PluginConfig} 17 | */ 18 | // eslint-disable-next-line no-unused-vars 19 | module.exports = (on, config) => { 20 | // `on` is used to hook into various events Cypress emits 21 | // `config` is the resolved Cypress config 22 | } 23 | -------------------------------------------------------------------------------- /cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add('login', (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This will overwrite an existing command -- 25 | // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) 26 | 27 | import 'cypress-iframe'; -------------------------------------------------------------------------------- /cypress/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "descomplicando-iframes-com-cypress", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "cypress": "^6.8.0", 14 | "cypress-iframe": "^1.0.1" 15 | } 16 | } 17 | --------------------------------------------------------------------------------