![12
Testing APEX Applications
Locating Page Elements – How can we find this button?
<button id="submit_bttn" data-test-id="submit" class="t-Button--hot">Submit</button>
Element Type Element Id Id only for testing CSS class Element text
(what the user sees)
Using…
• CSS selector syntax
• #submit_bttn
• button[data-test-
id=submit]
• .t-Button--hot
• Xpath selector syntax
• //button[@id=‘submit_bttn’]
• //button[@data-test-id=‘submit’]
• //button[@class=‘t-Button--hot’]
• //button[text()=‘Submit’]](https://image.slidesharecdn.com/testingapexappsataglance-231113110517-0bbd3450/85/Testing-APEX-apps-At-A-Glance-12-320.jpg)
![13
Testing APEX Applications
<button id="submit_bttn" data-test-id="submit" class="t-Button--hot">Submit</button>
Element Type Element Id Id only for testing CSS class Element text
(what the user sees)
Locating Page Elements – Cypress
cy.get('#submit_bttn'); // CSS selector support
cy.xpath("//button[text()='Submit']"); // XPath selector support (*)
cy.get('.t-Button--hot').contains('Submit'); // Use CSS selectors, still query by text](https://image.slidesharecdn.com/testingapexappsataglance-231113110517-0bbd3450/85/Testing-APEX-apps-At-A-Glance-13-320.jpg)
![14
Testing APEX Applications
<button id="submit_bttn" data-test-id="submit" class="t-Button--hot">Submit</button>
Element Type Element Id Id only for testing CSS class Element text
(what the user sees)
Locating Page Elements – Playwright
await page.locator("#submit_bttn"); // CSS selector support
await page.locator("//button//span[text()='Submit']"); // Xpath selector support
await page.locator('button:has-text("Submit")'); // CSS selector + query by text
await page.locator('text="Submit"'); // Get element only by text](https://image.slidesharecdn.com/testingapexappsataglance-231113110517-0bbd3450/85/Testing-APEX-apps-At-A-Glance-14-320.jpg)
![18
Testing APEX Applications
Dealing with Iframes - Cypress
cy.getIframe().find('#P7_CUST_FIRST_NAME').type('Max');
cy.getIframe().find('#P7_CUST_LAST_NAME').type('Mustermann');
cy.getIframe().find('#P7_CUST_STATE').select('Hawaii');
cy.getIframe().find('#P7_CUST_POSTAL_CODE').type('44789');
cy.getIframe().find('#P7_CREDIT_LIMIT').type('5000');
cy.getIframe().xpath("//button/span[text()='Add Customer']").click();
Cypress.Commands.add('getIframe', () => {
return cy
.get('div[role=dialog] iframe', {log: false})
.its('0.contentDocument.body', {log:false}).should('not.be.empty’)
.then(cy.wrap, {log: false});
});](https://image.slidesharecdn.com/testingapexappsataglance-231113110517-0bbd3450/85/Testing-APEX-apps-At-A-Glance-18-320.jpg)
![28
Solutions to Flakiness - Playwright
Auto-waiting and actionability checks
Before an element is being interacted with, Playwright makes sure that it
is ready for the interaction.
await page.locator("//button//span[text()='Sign In']").click();
• Retries until element is found or timeout is reached
• Performs actionabilty checks before “click”-action is executed](https://image.slidesharecdn.com/testingapexappsataglance-231113110517-0bbd3450/85/Testing-APEX-apps-At-A-Glance-28-320.jpg)
![36
LCT
Test APEX Standard Components easily and quickly
await page.locator('#P630_POPUP_LOV_DEFAULT_MULTI_COL_lov_btn').click();
await page.locator('.a-PopupLOV-searchBar input').type('Display1’);
await page.locator('#PopupLov_630_P630_POPUP_LOV_DEFAULT_MULTI_COL_dlg button').click();
await page.locator('//span[@class="popup-lov-highlight"][text()="Display1"]', ).click();](https://image.slidesharecdn.com/testingapexappsataglance-231113110517-0bbd3450/85/Testing-APEX-apps-At-A-Glance-36-320.jpg)
Testing APEX apps At A Glance
- 1. 1
- 2. 2 Testing APEX Apps at a Glance Kai Donato KSCOPE 23, Aurora
- 3. 3 Ihr Partner für den digitalen Wandel. Individuelle IT-Lösungen aus einer Hand. Facts and Numbers. Founded 1994 Headquarters: Ratingen Branches: Frankfurt a.M., Köln, München, Hamburg > 360 Employees ca. 48 Mio. € Revenue in 2022 Training company > 125 Customers across industries Vendor neutral certified partner of leading technology comanies
- 4. 4 About me • Employee at MT GmbH in Ratingen since January 2014 • Department Manager APEX & JavaScript @ MT GmbH • Project Leader and Developer (JavaScript & APEX) • DOAG-Initiator – JavaScript • Systems Integrations Specialist UNIX-Server and Networkadministration • Host on Devs on Tape Podcast Kai Donato @_KaiDonato
- 5. 5 • 1 • 2 1. About Me Why perform (automated) UI tests? 2. What's out there? 3. Testing APEX Applications 4. Reporting 5. Flakiness in automated UI testing 6. Agenda
- 7. 7 Why perform (automated) UI tests? Required Information is provided All Workflows work correctly Save time Error-Message validation Ensure User Authorization works correctly
- 11. 11 Testing APEX Apps - Requirements Offer extensive reporting options Session management Handle Flakiness Handle different page contexts Make interactions with page elements easy
- 12. 12 Testing APEX Applications Locating Page Elements – How can we find this button? <button id="submit_bttn" data-test-id="submit" class="t-Button--hot">Submit</button> Element Type Element Id Id only for testing CSS class Element text (what the user sees) Using… • CSS selector syntax • #submit_bttn • button[data-test- id=submit] • .t-Button--hot • Xpath selector syntax • //button[@id=‘submit_bttn’] • //button[@data-test-id=‘submit’] • //button[@class=‘t-Button--hot’] • //button[text()=‘Submit’]
- 13. 13 Testing APEX Applications <button id="submit_bttn" data-test-id="submit" class="t-Button--hot">Submit</button> Element Type Element Id Id only for testing CSS class Element text (what the user sees) Locating Page Elements – Cypress cy.get('#submit_bttn'); // CSS selector support cy.xpath("//button[text()='Submit']"); // XPath selector support (*) cy.get('.t-Button--hot').contains('Submit'); // Use CSS selectors, still query by text
- 14. 14 Testing APEX Applications <button id="submit_bttn" data-test-id="submit" class="t-Button--hot">Submit</button> Element Type Element Id Id only for testing CSS class Element text (what the user sees) Locating Page Elements – Playwright await page.locator("#submit_bttn"); // CSS selector support await page.locator("//button//span[text()='Submit']"); // Xpath selector support await page.locator('button:has-text("Submit")'); // CSS selector + query by text await page.locator('text="Submit"'); // Get element only by text
- 15. 15 Testing APEX Applications Page Contexts
- 16. 16 Testing APEX Applications Page Contexts
- 17. 17 Testing APEX Applications Dealing with Iframes - Playwright const iframe = await page.frameLocator('iframe'); await iframe.locator('#P7_CUST_FIRST_NAME').type('Max'); await iframe.locator('#P7_CUST_LAST_NAME').type('Mustermann'); await iframe.locator('#P7_CUST_STATE').selectOption({ label: 'Hawaii' }); await iframe.locator('#P7_CUST_POSTAL_CODE').type('44789'); await iframe.locator('#P7_CREDIT_LIMIT').type('5000'); await iframe.locator('text=Add Customer').click();
- 18. 18 Testing APEX Applications Dealing with Iframes - Cypress cy.getIframe().find('#P7_CUST_FIRST_NAME').type('Max'); cy.getIframe().find('#P7_CUST_LAST_NAME').type('Mustermann'); cy.getIframe().find('#P7_CUST_STATE').select('Hawaii'); cy.getIframe().find('#P7_CUST_POSTAL_CODE').type('44789'); cy.getIframe().find('#P7_CREDIT_LIMIT').type('5000'); cy.getIframe().xpath("//button/span[text()='Add Customer']").click(); Cypress.Commands.add('getIframe', () => { return cy .get('div[role=dialog] iframe', {log: false}) .its('0.contentDocument.body', {log:false}).should('not.be.empty’) .then(cy.wrap, {log: false}); });
- 19. 19 Testing APEX Applications Session Management - Navigating within the current session Standard URLs Friendly URLs https://hostname:port/ords/f?p=<app_id>:<page_number>:<session_id> https://hostname:port/ords/path_prefix/r/app_alias/page_alias?session=13766599855150
- 20. 20 Testing APEX Applications Navigating within the current session - Cypress describe('sample test', () => { beforeEach(() => { cy.visit('https://apex.generationcode.de/ords/f?p=100:LOGIN_DESKTOP’); cy.get('#P101_USERNAME').type('user'); cy.get('#P101_PASSWORD').type('*********', {log: false}); cy.get('#P101_LOGIN').click(); cy.url().should('contain', 'f?p=100:1:').then($url => { window.app_url = $url }); }) it('go to customers page', () => { cy.visit(app_url.replace(':1:', ':2:')); }) }) Approach from Hayden Hudson, see: https://www.youtube.com/watch?v=QFzN_0soxiQ&t=4641s
- 21. 21 Testing APEX Applications Navigating within the current session - Playwright test.describe('demo', () => { test.beforeEach(async ({ page}) => { await page.goto('https://apex.generationcode.de/ords/f?p=100:'); await page.locator('#P101_USERNAME').type('user'); await page.locator('#P101_PASSWORD').type('*********'); await page.locator('text=Sign In').click(); await expect(page).toHaveURL(/(?<=.)(f?p=100:1:)(?=.)/gm); }); test('go to page 2', async ({ page }) => { await page.goto(page.url().replace(':1:', ':2:')) }); });
- 22. Reporting
- 25. Flakiness
- 26. 26 Flakiness Flakiness = The test outcome can switch between pass and fail throughout multiple runs without any changes to the test code. Time
- 27. 27 Thoughts on Flakiness Flakiness can never be reduced to zero Flaky tests can be useful (initially)
- 28. 28 Solutions to Flakiness - Playwright Auto-waiting and actionability checks Before an element is being interacted with, Playwright makes sure that it is ready for the interaction. await page.locator("//button//span[text()='Sign In']").click(); • Retries until element is found or timeout is reached • Performs actionabilty checks before “click”-action is executed
- 29. 29 Solutions to Flakiness - Playwright Actionability checks • Element is attached to the DOM/ a Shadow Root • Element is visible • Element is stable #sign_in_bttn { visibility: hidden; display: none; }
- 30. 30 Solutions to Flakiness - Playwright Actionability checks • Element is enabled and editable <button type="button" class="a-Button" disabled data-action="reset-report">Reset</button> • Element receives events Overlay
- 31. 31 Our approach to automated testing
- 32. 32 LCT LCT in a nutshell Node.js Server APEX Database
- 33. 33 LCT Interacting with page elements Simply select the element you want to interact with No need to worry about selectors Select Interactive Grid columns as well For custom page elements, manually entering Xpath or CSS selector is also supported
- 35. 35 LCT Reporting (Preview) Screenshots on step failure Get extensive information on what went wrong See execution times of each step
- 36. 36 LCT Test APEX Standard Components easily and quickly await page.locator('#P630_POPUP_LOV_DEFAULT_MULTI_COL_lov_btn').click(); await page.locator('.a-PopupLOV-searchBar input').type('Display1’); await page.locator('#PopupLov_630_P630_POPUP_LOV_DEFAULT_MULTI_COL_dlg button').click(); await page.locator('//span[@class="popup-lov-highlight"][text()="Display1"]', ).click();
- 38. 38 Flows for APEX BPMN 2.0 Workflows for APEX • Open Source • Community Driven • Support available
- 39. 39 Subscribe to get notified! You heard it here first! #kscope23
- 40. 40 Questions? Kai Donato Department Manager APEX & JavaScript Telefon: +49 2102 30 961-0 Mobil: +49 173 8937790 Mail: [email protected] MT GmbH Balcke-Dürr-Allee 9 40882 Ratingen www.mt-itsolutions.com
- 41. 41
Editor's Notes
- #7: https://www.stern.de/wirtschaft/job/tokio--café-hilft-gaesten-gegen-das-aufschieben-von-arbeit-31807362.html
- #9: https://www.stern.de/wirtschaft/job/tokio--café-hilft-gaesten-gegen-das-aufschieben-von-arbeit-31807362.html