{"id":12107,"date":"2020-01-29T00:15:59","date_gmt":"2020-01-29T05:15:59","guid":{"rendered":"https:\/\/qxf2.com\/blog\/?p=12107"},"modified":"2020-01-29T00:15:59","modified_gmt":"2020-01-29T05:15:59","slug":"highlight-feature-of-qxf2-framework","status":"publish","type":"post","link":"https:\/\/qxf2.com\/blog\/highlight-feature-of-qxf2-framework\/","title":{"rendered":"Highlight feature of Qxf2&#8217;s Page Object Model framework"},"content":{"rendered":"<p><span>Are you lost with locating the web elements while debugging your test script? \u00a0The highlight feature of Qxf2&#8217;s Page Object Model framework helps you to debug locators by giving a visual clue. This blog post will guide you with the steps involved in using the highlight feature of Qxf2&#8217;s Page Object Model framework in your test script.<\/span><\/p>\n<p><span>The highlight feature in our framework will give you a visual clue of the test flow.\u00a0<\/span><span>On enabling the highlight feature, the web elements under test will be highlighted during test execution.\u00a0A locator might match with exactly a single web element on a web page. It might match with multiple web elements as well like in the case of reading data from a table.\u00a0<\/span>The highlighting feature has been implemented for both scenarios.<\/p>\n<hr \/>\n<h3>Steps to invoke the highlight feature in your test script are:<\/h3>\n<ol>\n<li><span><span>Fork and clone the <a href=\"https:\/\/github.com\/qxf2\/qxf2-page-object-model\" target=\"_blank\" rel=\"noopener\">Qxf2&#8217;s Page Object Model framework<\/a>\u00a0and follow the setup instructions detailed out in the <a href=\"https:\/\/github.com\/qxf2\/qxf2-page-object-model\/blob\/master\/Readme.md\" target=\"_blank\" rel=\"noopener\">Readme.md<\/a> file. To jump start with creating your new project with our framework, you can refer to this blog post: <a href=\"https:\/\/qxf2.com\/blog\/how-to-start-using-the-qxf2-framework-with-a-new-project\/\" target=\"_blank\" rel=\"noopener\">How to start using the Qxf2&#8217;s framework with a new project<\/a><\/span><\/span>\u200c<br \/>\n\u200c<\/li>\n<li><span><span><span><span><span>Edit your test script to turn on or off the highlight feature as needed. Call the <em>turn_on_highlight()<\/em> method to enable the highlighting feature. Similarly, call the <em>turn_off_highlight()<\/em> method to disable the highlighting feature of the framework in your test script. The test script namely, <a href=\"https:\/\/github.com\/qxf2\/qxf2-page-object-model\/blob\/master\/tests\/test_example_form.py\" target=\"_blank\" rel=\"noopener\">test_example_form.py<\/a>\u00a0in our framework has been updated to include this feature<\/span><\/span><\/span><\/span><\/span>\u200c<br \/>\n\u200c<\/li>\n<li>Run your test script and you will have a visual highlighting that shows the flow of your test. A sample run of our test script namely, test_example_form.py is as follows:<br \/>\nOpen Git Bash and execute\u00a0<strong><em>pytest -k example_form <\/em><\/strong>command. You will see the visual highlighting of the web element under test as in the image below.\u200c<br \/>\n\u200c<\/li>\n<\/ol>\n<p><a href=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/01\/highlight.png\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-12109 size-medium\" src=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/01\/highlight-300x160.png\" alt=\"Test result showing highlighting of web element\" width=\"300\" height=\"160\" srcset=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/01\/highlight-300x160.png 300w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/01\/highlight-768x411.png 768w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/01\/highlight-1024x548.png 1024w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/01\/highlight.png 1245w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>I hope this post helps you with debugging your test script!<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you lost with locating the web elements while debugging your test script? \u00a0The highlight feature of Qxf2&#8217;s Page Object Model framework helps you to debug locators by giving a visual clue. This blog post will guide you with the steps involved in using the highlight feature of Qxf2&#8217;s Page Object Model framework in your test script. The highlight feature [&hellip;]<\/p>\n","protected":false},"author":31,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[189,63,107,18],"tags":[212],"class_list":["post-12107","post","type-post","status-publish","format-standard","hentry","category-debugging","category-page-object-model","category-pytest","category-python","tag-debugging-automation"],"_links":{"self":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/12107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/comments?post=12107"}],"version-history":[{"count":27,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/12107\/revisions"}],"predecessor-version":[{"id":12275,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/12107\/revisions\/12275"}],"wp:attachment":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/media?parent=12107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/categories?post=12107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/tags?post=12107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}