input[type="date"]를 Selenium으로 조작할 때의 주의점

11638 단어 Chrome셀레늄selenium-webdriverHTML5루비

소개


<input type="date"/> 의 입력을 Selenium Webdriver의 send_keys 에서 입력하려고 했는데, 의도하지 않은 값이 입력되었으므로 자세히 조사해 보았습니다.
「과연! 그랬던 것인가!!」를 조사 결과를 더해 해설해 갑니다.

결론



W3C(HTML측)에서의 문헌을 찾을 수 없었습니다만, ECMA 문서 에 의하면, 275760년 9월 13일까지 입력할 수 있다고 합니다.
Time Values and Time Range

(中略)

Time is measured in ECMAScript in milliseconds since 01 January,　1970 UTC. 
In time values leap seconds are ignored.
It is assumed that there are exactly 86,400,000 milliseconds per day.
ECMAScript Number values can represent all integers from
–9,007,199,254,740,992 to 9,007,199,254,740,992;
this range suffices to measure times to millisecond precision
for any instant that is within approximately 285,616 years,
either forward or backward, from 01 January, 1970 UTC.

The actual range of times supported by ECMAScript Date objects is
slightly smaller: exactly –100,000,000 days to 100,000,000 days
measured relative to midnight at the beginning of 01 January, 1970 UTC.
This gives a range of 8,640,000,000,000,000 milliseconds
to either side of 01 January, 1970 UTC.

275760년을 입력해 보면 275760/09/13까지만 표시됩니다.
또한 275761년은 입력 시점에 들어가지 않았습니다.
확실히 쓰여진 사양과 일치합니다! !


즉...
그래서 이하, 3개의 대처 방법을 생각했습니다.

해결 방법


  • 1. 입력값을 <input type="date"/> 의 사양에 대응한 값으로 한다
  • 기원을 6 자리로 입력합니다 (0으로 시작).

  • 2. 자바 스크립트에서 값 값을 입력하십시오.
  • 3. input 태그에 max 속성을 추가한다.
  • 입력을 받아들이는 날짜를 기원 2999년까지 정의한다


    • 개인적으로는, 3이 제일 깨끗이입니다만, 각각의 방법에 대한 나의 견해를 써 둡니다.

    1 또는 2는 테스트 코드 측에서 대응할 수 있습니다.
    3은 어플리케이션측의 뷰(HTML)를 변경할 필요가 있습니다만, 테스트 코드는 위화감이 없는 것이 됩니다.

    1은 사용자의 매뉴얼 조작과는 다르고, 사양을 이해하고 있지 않은 사람이 보면 의미 불명한 테스트 코드가 되어 버립니다.
    2는 테스트 코드로서도 위화감없이 HTML 측의 수정도 불필요합니다만, 그 부분만 Javascript의 요소가 더해집니다.

    이하, SeleniumWebDriver(Ruby)로 검증을 한 코드를 실어 둡니다.

    Selenium Webdriver (Ruby)의 검증



    브라우저와 Selenium은 다음 버전을 사용했습니다.
  • Chrome(88.0.4324.150)
  • selenium-webdriver (3.142.7)

    • date.html
    <!DOCTYPE html>
<html>
  <body>
    <form>
      <input type="date" id="date"/>
    </form>
  </body>
</html>

    Gemfile
    source 'https://rubygems.org'

gem 'selenium-webdriver'

    의도하지 않은 입력 값이되는 경우



    NG 케이스 1 : 하이픈 (-)없이 날짜를 sendkeys


  • 입력값:20210131
  • 결과: 202101-03-01
    • require 'selenium-webdriver'

driver = Selenium::WebDriver.for :chrome
driver.get('file://[date.htmlの絶対パス]')

ele = driver.find_element(:css, '#date')
ele.send_keys('20210131')
puts ele.attribute('value') # => 202101-03-01

    NG케이스 2：하이픈(-) 단락의 일자를 sendkeys


  • 입력값:20210131
  • 결과: 202101-03-01
    •  :
ele.send_keys('2021-01-31')
puts ele.attribute('value') # => 202101-03-01

    NG케이스 3：슬래시(/) 단락의 일자를 sendkeys


  • 입력치:2021/01/31
  • 결과: 202101-03-01
    •  :
ele.send_keys('2021/01/31')
puts ele.attribute('value') # => 202101-03-01

    NG케이스 4: 선두에 0을 1개 부여한 값을 sendkeys


  • 입력값:020210131
  • 결과: 20210-12-01
    •  :
ele.send_keys('020210131')
puts ele.attribute('value') # => 20210-12-01

    의도한 입력값이 되는 경우



    이하, 입력치는 모두 2021/01/31 가 되어, 의도대로의 결과가 됩니다.

    OK케이스 1：선두에 0을 2개 부여한 값을 sendkeys


  • 입력치:0020210131
    • require 'selenium-webdriver'

driver = Selenium::WebDriver.for :chrome
driver.get('file://[date.htmlの絶対パス]')

ele = driver.find_element(:css, '#date')
ele.send_keys('0020210131')
puts ele.attribute('value') # => 2021/01/31

    OK케이스 2：하이픈(-) 단락의 일자의 선두에 0을 2개 부여한 값을 sendkeys


  • 입력값: 002021-01-31 
    • ele.send_keys('002021-01-31')
puts ele.attribute('value') # => 2021/01/31

    OK케이스 3：Javascript로 value를 입력


  • 입력값:2021-01-31
    • driver.execute_script('document.getElementById("date").value="2021-01-31";')
puts ele.attribute('value') #=> 2021-01-31

    OK 케이스 4 : input 태그에 max 속성을 추가하여 하이픈 (-)없이 날짜를 sendkeys


  • HTML의 input 태그에 max 속성을 추가해, 값은 "2999-12-31"로 한다
  • max 속성 : 입력값의 최대치를 정의한다


    • date_max.html
    <!DOCTYPE html>
<html>
  <body>
    <form>
      <input type="date" id="date_max" max="2999-12-31"/>
    </form>
  </body>
</html>
  • 입력값:20210131
    • require 'selenium-webdriver'

driver = Selenium::WebDriver.for :chrome
driver.get('file://[date_max.htmlの絶対パス]')

ele = driver.find_element(:css, '#date_max')
ele.send_keys('20210131')
puts ele.attribute('value') #=> 2021-01-31

    OK 케이스 5 : input 태그에 max 속성을 추가하여 슬래시 (/)로 구분 된 날짜를 sendkeys


  • 입력치:2021/01/31
    • ele = driver.find_element(:css, '#date_max')
ele.send_keys('2021/01/31')
puts ele.attribute('value') #=> 2021-01-31
    최신 버전의 ChromeCanary에서 ChromeDriver를 얻는 방법
    selenium/standalone-chrome에서 headless로 원격으로 연결하고 다운로드하고 싶습니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage