1 / 89

ENSURE YOUR USERS EXPERIENCE

Learn about the importance of front-end automation, the benefits it brings, and how to make your application more automatable. Discover different techniques and tools for front-end automation.

pyoder
Télécharger la présentation

ENSURE YOUR USERS EXPERIENCE

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ENSURE YOUR USERS EXPERIENCE A trip around end user validation automation tools

  2. WHY ARE WE HERE TODAY • Maybe you have a microservice environment that needs final verification • Maybe you have an architecture that doesn’t allow for better test coverage • Maybe you have no other support from the organization • Maybe you want your first experience with code • Maybe you have no other choice

  3. Started writing automation early 2010s WHO AM I - RICK CLYMER Love python but have realized the use for other languages Huge Cleveland sports fan

  4. WHO ARE YOU? Testing Experience Automation Experience Language Experience

  5. WHAT’S THE PLAN FOR TODAY? • Why do we use front end automation • Make your application more automatable • Get Hands-On With Selenium • Get Hands-On With Cypress • Get Hands-On With TestCafe • Review what the path forward looks like

  6. WHY HAVEN’T WE USED FRONT END AUTOMATION • It’s slow • It’s brittle • It’s too hard to write and maintain • No developers want to write it • Unit and integration tests cover everything, you can just manually check a few things

  7. WHAT HAS IT COST YOU EVERY CARD/SPRINT/RELEASE MANUALLY CHECKING SIMPLE THINGS BUGS HAPPENING ON BROWSERS THAT UNIT AND INTEGRATION TESTS DON’T COVER REGRESSIONS SNEAKING THRU BECAUSE THERE SIMPLY WASN’T ENOUGH TIME MAYBE EVEN YOUR SANITY

  8. SO WHY SHOULD WE DO IT • Fast feedback on front end working as users expect it to • Able to test an environment where all of your microservices are together • Repeatable automation that can validate your application in minutes • Expand your career and reputation with your development team • Learn your application at a whole different level

  9. SO WHY SHOULDN’T WE DO IT • Development team doesn’t want to write any automation or tests • We want to have a testing square rather than a pyramid • It’s all we’ve ever done so why diversify ourselves

  10. WHAT ARE OUR OPTIONS?

  11. OR YOU CAN KEEP DOING IT THE OLD WAY

  12. HOW TO MAKE YOUR APPLICATION AUTOMATABLE

  13. LET’S DREAM What would make our application more automatable?

  14. SOME OF THE RECENT THINGS I’VE TRIED/SEEN • Loading spinners or indicators until a page is fully loaded • Accessible data • Making a mobile app a hybrid app • Custom endpoints • Common actions • Non-UI based actions

  15. MY FAVORITE Div(contains(text(), “Locators”)

  16. WHERE DO WE START WITH LOCATORS • Chrome Dev Tools • Allows you to see entire page source • Watch network traffic • Emulate your experience in a mobile system • Simulate a locator • Other ways to access • Code base • Automation tools scrapping page source

  17. TYPES OF LOCATORS? • ID • Name • Class Name • CSS Selector • Xpath • Link Text • Tag Name

  18. LOCATOR EXAMPLES • Class Name = ‘gLFyf gsfi’ • Google search input • Xpath = ‘//*[@class=“dropdown-menu league-nav med”]/li[@class=“league”]/a’ • ESPN league score selector • CSS Selector = "header[class=main-header]>div>nav>ul>li[id='about’]” • Python about link • ID = twotabsearchtextbox • Amazon search input

  19. LET’S TRY IT OUT

  20. STEP 1 (EXERCISE)BUILD TASK APP LOCALLY ON YOUR COMPUTER • git clone –b master https://github.com/clymerrm/todo-list.git: • Or download zip file github.com/clymerrm/todo-list • From terminal, navigate to root directory of project • Docker-compose up -d Want to refresh the data, from root directory run npm run start-fresh https://rb.gy/3881b0

  21. STEP 2 (EXERCISE)FIND LOCATORS FOR THE FOLLOWING ELEMENTS • New Task Name Input • Create task button • Home link • 1st completed task name • 3rd non completed task due date • Delete button https://rb.gy/3881b0

  22. STEP 2 (REVIEW)FIND LOCATORS FOR THE FOLLOWING ELEMENTS • New Task Name Input • (By.Name, ‘title’) • Create task button • (By.CSS_Selector, "input[value='Create Task’]”) • Home link • (By.LINK_TEXT, “Home”) • 1st completed task name • (By.XPATH, “//*[contains(@style, 'text-decoration: line-through')][1]”) • 3rd non completed task due date • (By.XPATH, "//*[not(contains(@style, 'text-decoration: line-through'))]/p") • Delete button • (By.ID, “delete”) But which one did you click? https://rb.gy/3881b0

  23. WHAT COULD MAKE OUR APP MORE AUTOMATABLE?

  24. DATA TEST KEYS git checkout data-test-keys

  25. STEP 3 (EXERCISE)REEVALUATE NOW THAT DATA TEST KEYS EXIST • New Task Name Input • Create task button • Home link • 1st completed task name • 3rd non completed task due date • Delete button https://rb.gy/3881b0

  26. STEP 3 (REVIEW)REEVALUATE NOW THAT DATA TEST KEYS EXIST • New Task Name Input • (By.CSS_SELECTOR, ‘input[data-test-key=task-name-input’]) • Create task button • (By.CSS_Selector, "input[data-test-key=create-task-button’]”) • Home link • (By.CSS_SELECTOR, “a[data-test-key=‘HomeLink’]”) • 1st completed task name • (By.XPATH, '//*[@data-test-key=”completed-task-element"][1]’) • 3rd non completed task due date • (By.XPATH, "//*[@data-test-key=‘task-element’][3]/p/span[@data-test-key=‘task-due-date’]") • Delete button • (By.ID, “delete”) https://rb.gy/3881b0

  27. BREAK TIME Back in 10 minutes?

  28. WELCOME TO SELENIUM

  29. WHAT IS SELENIUM WEBDRIVER? • Tool for automating front end interactions with browsers • Browsers supported: • Chrome, Firefox, Edge, Internet Explorer, Safari, Opera • Languages supported: • C#, Java, JavaScript, Python, PHP, Ruby • Creates a webdriver instance to connect to your browser from your codebase of choice • Many secondary packages can be used to extend the tool • Many reporting packages exist to make your test results more usable

  30. What you need to do to get setup WHAT ARE WE GOING TO COVER WITH SELENIUM Writing your first test Review the most commonly used functionality Refactor our testing to more usable in the future

  31. LET’S GET SETUP Latest version of Node and NPM Selenium webdriver – npm install selenium-webdriver Webdriver-manager – npm install webdrivrer-manager Editor of choice (Intellij IDEA, Visual Studio Code, Atom) Python 3.7 or higher Pipenv – pip3 install pipenv Selenium webdriver – pip3 install selenium Webdriver_manager – pip3 install webdriver_manager Python Editor of Choice (PyCharm, Visual Studio Code, Sublime Text)

  32. START SELENIUM WEBDRIVER UP webdriver-manager update webdriver-manager start (will display in terminal) Optional to run in background: webdriver-manager start –detach from webdriver_manager.chrome import ChromeDriverManager from selenium import webdriver webdriver.Chrome(ChromeDriverManager().install())

  33. TEAR SELENIUM WEBDRIVER DOWN If running in background, webdriver-manager shutdown If not, exit like you would anything else from command line driver.quit() or driver.close()

  34. ASSERTING RESULTS Must use another package to assert results Common assertion library is Chai (https://www.chaijs.com/api/bdd/) const { expect } = require(‘chai’)’; driver.getTitle().then(function(title) { expect(title).to.equal(‘Google’) }); Use python’s built in assertion library assert something in some element Also can use external package to assert results Popular assertion human readable library is pyhamcrest from hamcrest import * assert_that(driver.title, equal_to(‘Google’))

  35. LETS START TESTING

  36. COMMON SELENIUM COMMANDS – NON-ELEMENT RELATED

  37. FIND ELEMENTS ON A PAGE var webdriver = require(‘selenium-webdriver’), By = webdriver.By driver.findElement(By.name(‘delete’)) driver.findElements(By.xpath(“//*[@class=‘delete’]/button”) from selenium.webdriver.common.by import By driver.find_element(By.ID, “delete”) driver.find_elements(By.CSS_SELECTOR, “div[data-test-key=tasks]

  38. COMMON SELENIUM COMMANDS – ELEMENT RELATED driver.findElement(By.name(‘delete’)) driver.findElements(By.xpath(“//*[@class=‘delete’]/button”) driver.find_element(By.ID, “delete”).click() newTask = driver.find_element(By.CSS_SELECTOR, “div[data-test-key=newTaskInput] newTask.send_keys(‘Some new task’)

  39. SELENIUM API DOCUMENTATION • JavaScript • https://seleniumhq.github.io/selenium/docs/api/javascript/index.html • Python • https://selenium-python.readthedocs.io/

  40. WRITE OUR FIRST “TEST” CREATE A NEW TASK WITH A DUE DATE OF TOMORROW MARK TASK AS COMPLETED DELETE A NEWLY CREATED TASK https://rb.gy/3881b0

  41. HOW DID IT GO? • What should we do differently? • Is the app testable? • Is the app automatable? • Can these tests be extended for future usage?

  42. BREAK TIME Back in 10 minutes?

  43. GREAT, WE AUTOMATED SOMETHINGS, NOW WHAT? • Page objects • Test Framework • Waiting for elements state

  44. CENTRALIZE YOUR LOCATORS AND APP FUNCTIONS • Use Page Object Framework • Objects representing a web page or component • What are they made up of? • Locators for that specific page/component • Interaction methods for that specific page/component • Why Do Them? • Future proof your automation code • Make your automation code easily reusable

  45. HOW CAN WE STRUCTURE OUR PAGE OBJECTS • Create Tasks • Todo list • Todo list filtering • Header

  46. GIT CHECKOUT PAGE_OBJECTS

  47. PAGE OBJECT EXAMPLES https://rb.gy/3881b0

  48. STOP WRITING ONE MASSIVE “TEST” • Use a test framework • Allows you to create a test suite rather than just automation lines of code • Usually include reporting frameworks

  49. GIT CHECKOUT FRAMEWORKS

  50. TEST FRAMEWORK EXAMPLES

More Related