<\/p>\n\n\n\n
Recently, I found myself facing a seemingly simple task: filling in an HTML input of type In most cases, the straightforward approach of using Selenide’s However, I hit a roadblock when Firefox decided to play hard to get. Firefox presents a neat calendar popup for the In my desperation, I considered trying to hack Firefox’s calendar popup by displaying it and clicking the appropriate date. I even thought about using Java’s At this point, I decided to abandon the Selenide\/Java route and dive deeper into the underlying technologies. I transitioned from Selenide to Selenium and eventually found myself delving into JavaScript.<\/p>\n\n\n\n Initially, I thought I could quickly whip up a dirty script to find a JavaScript variable and inject my value directly. However, I quickly realized that this wouldn’t work with React. Once again, I was forced to abandon my favorite shortcuts and follow best practices for simulating events on the input element.<\/p>\n\n\n\n After much trial and error, I came up with a solution that involved executing JavaScript with Selenium. Here’s the code snippet that finally did the trick:<\/p>\n\n\n\n In conclusion, navigating the complexities of HTML Our coding expert and enthusiast Krzysztof Mroczek on all shades of Selenium and more!<\/p>\n","protected":false},"author":1,"featured_media":130,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[25],"tags":[37,36,33,32,35],"class_list":["post-157","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-our-tips-tricks","tag-automatization","tag-input","tag-selenide","tag-selenium","tag-tests"],"_links":{"self":[{"href":"https:\/\/blog.acini.pl\/index.php\/wp-json\/wp\/v2\/posts\/157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.acini.pl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.acini.pl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.acini.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.acini.pl\/index.php\/wp-json\/wp\/v2\/comments?post=157"}],"version-history":[{"count":6,"href":"https:\/\/blog.acini.pl\/index.php\/wp-json\/wp\/v2\/posts\/157\/revisions"}],"predecessor-version":[{"id":163,"href":"https:\/\/blog.acini.pl\/index.php\/wp-json\/wp\/v2\/posts\/157\/revisions\/163"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.acini.pl\/index.php\/wp-json\/wp\/v2\/media\/130"}],"wp:attachment":[{"href":"https:\/\/blog.acini.pl\/index.php\/wp-json\/wp\/v2\/media?parent=157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.acini.pl\/index.php\/wp-json\/wp\/v2\/categories?post=157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.acini.pl\/index.php\/wp-json\/wp\/v2\/tags?post=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Date<\/code> <\/em>using Selenium and Selenide. While my experience was with Selenium, I suspect the challenges I encountered would be similar if I were using Cypress or other testing frameworks.<\/p>\n\n\n\nThe Standard Approach: $(bySelector).setValue(theNewValue)<\/h4>\n\n\n\n
setValue<\/code> method works like a charm:<\/p>\n\n\n\n$(bySelector).setValue(theNewValue);<\/pre>\n\n\n\n
Date<\/code> input, but the calendar itself is not part of the web page’s source code. If you inspect the page source, you’ll only find <input type=\"date\"><\/em><\/code> and nothing more.<\/p>\n\n\n\nThinking Outside the Box: Hacking the Calendar Popup<\/h4>\n\n\n\n
Robot<\/code> <\/em>class and mousePress<\/code> function. But let’s face it: that approach would be error-prone, a maintenance nightmare, and wouldn’t impress any of our other beloved browsers.<\/p>\n\n\n\nExploring Alternatives: From Selenide to JavaScript<\/h4>\n\n\n\n
The Final Solution: Executing JavaScript with Selenide<\/h4>\n\n\n\n
Selenide.webdriver().driver().executeJavaScript(\n \"var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, \\\"value\\\").set;\"\n + \"nativeInputValueSetter.call(arguments[0], arguments[1]);\"\n + \"var ev2 = new Event('change', { bubbles: true});\"\n + \"arguments[0].dispatchEvent(ev2);\"\n, input, formattedDate);<\/code><\/code><\/pre>\n\n\n\n“Dirty Shortcuts” conclusion<\/h4>\n\n\n\n
Date<\/code> input across different browsers and testing frameworks presented its fair share of challenges. From initially relying on Selenide’s setValue<\/code> method to exploring the JavaScript and ultimately executing custom scripts, it is a journey of trial and error. While shortcuts can be tempting, following best practices often proves to be the most reliable approach in the long run.<\/p>\n\n\n