Merge pull request #51 from autifyhq/hiroki/fix-description-assert-checked

Add "Press Enter" and "Get a value of input or textarea element" snippets.

Author: harokki

content/en/snippets/assertions/assert_checked.md

@@ -4,11 +4,9 @@ weight: 10
 ie_support: true
 ---
 
-Use this snippet to assert that a checkable element (such as a radio button implemented as `<input type="radio">`) is checked or not, in case it is not possible with Recorder.
+Use this snippet to assert whether a checkable element is checked or not, in case it is not possible with currently supported assertions.
 
-Refer to the following document for currently supported assertions by Recorder.
-
-https://help.autify.com/docs/list-of-assertions
+Please check <a href="https://help.autify.com/docs/list-of-assertions" target="_blank">**here**</a> for currently supported assertions.
 
 Change the following values to fit your test case:
 

content/en/snippets/keyboard/_index.md

@@ -0,0 +1,6 @@
+---
+title: "Keyboard"
+weight: 30
+---
+
+{{< toc-tree >}}

content/en/snippets/keyboard/press_enter.md

@@ -0,0 +1,34 @@
+---
+title: "Press Enter"
+weight: 10
+ie_support: false
+---
+
+Use this snippet to fire a pressing Enter key event on an element.
+
+Change the following value to specify the element:
+
+- `selector`: A string of the element selector
+
+```js
+/*
+ * Specify the element selector
+ */
+var selector = "<TODO: REPLACE SELECTOR>";
+var element = document.querySelector(selector);
+
+/*
+ * Exit if it does not exist
+ */
+if (!element) {
+  throw new Error(
+    "Error: cannot find the element with selector(" + selector + ")."
+  );
+}
+
+/* Create and init a pressing Enter key event */
+var enterEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true });
+
+/* Fire a pressing Enter key event */
+element.dispatchEvent(enterEvent);
+```

content/en/snippets/scroll/scroll_to_element.md

@@ -1,10 +1,14 @@
 ---
-title: "Scroll until an element is visible"
+title: "Scroll until an element is displayd"
 weight: 20
 ie_support: false
 ---
 
-Scroll to a specified element in the entire page.
+Scroll down the page until the specific element is displayed.
+
+Change the following value to specify the element:
+
+- `selector`: A string of the element selector
 
 ```js
 /**
@@ -23,7 +27,8 @@ if (!element) {
 }
 
 /**
- * Scroll to the bottom of the element
+ * Scroll until the element is displayed.
+ * If the block value is set to "center", the element will scroll to the center of the page.
  */
-element.scrollIntoView(false);
+element.scrollIntoView({block: "end", inline: "nearest", behavior: "smooth"});
 ```

content/en/snippets/values/get_input_textarea_value.md

@@ -0,0 +1,33 @@
+---
+title: "Get the value entered into an Input or Textarea element"
+weight: 60
+ie_support: true
+---
+
+Use this snippet to return the value entered into a `<input>` element or a `<textarea>` element.
+
+Change the values written below.
+
+- `selector`: A string of a selector to pinpoint the element.
+
+```js
+/**
+ * Locate the element
+ */
+var selector = "<TODO: REPLACE SELECTOR>";
+var element = document.querySelector(selector);
+
+/**
+ * Stop process if it does not exist
+ */
+if (!element) {
+  throw new Error(
+    "Error: cannot find the element with selector(" + selector + ")."
+  );
+}
+
+/**
+ * Return the value entered for the element
+ */
+return element.value;
+```

content/ja/snippets/assertions/assert_checked.md

@@ -4,11 +4,9 @@ weight: 10
 ie_support: true
 ---
 
-レコーダーで検証できないチェック可能要素 (`<input type="radio">` で実装されたラジオボタンなど) がチェックされているかどうかのアサーションを行いたい場合にご利用ください。
+「チェックボックスが選択されている/いないことを確認する」アサーションで、検証できないチェック可能要素をアサーションしたい場合にご利用ください。
 
-現在レコーダーでサポートされているアサーションについては、以下をご確認ください。
-
-https://help.autify.com/docs/ja/list-of-assertions
+現在サポートされているアサーションについては<a href="https://help.autify.com/docs/ja/list-of-assertions" target="_blank">**こちら**</a>をご確認ください。
 
 以下の値をテストケースに合うように変更してください:
 

content/ja/snippets/keyboard/_index.md

@@ -0,0 +1,6 @@
+---
+title: "キーボード操作"
+weight: 30
+---
+
+{{< toc-tree >}}

content/ja/snippets/keyboard/press_enter.md

@@ -0,0 +1,34 @@
+---
+title: "Enterキーを押下する"
+weight: 10
+ie_support: false
+---
+
+CSSセレクターを指定して見つかった要素に対して、Enterキーを押下するイベントを発生させるのに使用します。
+
+以下の値を変更してください。
+
+- `selector`: 対象要素を特定するCSSセレクターの文字列
+
+```js
+/**
+ * 要素を探す
+ */
+var selector = "<TODO: REPLACE SELECTOR>";
+var element = document.querySelector(selector);
+
+/**
+ * 要素がなければ処理を中断する
+ */
+if (!element) {
+  throw new Error(
+    "Error: cannot find the element with selector(" + selector + ")."
+  );
+}
+
+/* Enterキーの押下のイベントを生成し初期化する */
+var enterEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true });
+
+/* Enterキーの押下のイベントを発生させる */
+element.dispatchEvent(enterEvent);
+```

content/ja/snippets/scroll/scroll_to_element.md

@@ -4,7 +4,11 @@ weight: 20
 ie_support: false
 ---
 
-特定の要素の位置までページをスクロールします。
+特定の要素が表示されるまでページをスクロールします。
+
+以下の値を対象要素に合わせて変更してください。
+
+- `selector`: 要素を特定するCSSセレクターの文字列
 
 ```js
 /**
@@ -23,7 +27,8 @@ if (!element) {
 }
 
 /**
- * 要素の下が表示されるまでスクロールする
+ * 要素が表示されるまでスクロールする
+ * 要素を真ん中までスクロールする場合はblockの値を"center"に変更してください
  */
-element.scrollIntoView(false);
+element.scrollIntoView({block: "end", inline: "nearest", behavior: "smooth"});
 ```

content/ja/snippets/values/get_input_textarea_value.md

@@ -0,0 +1,33 @@
+---
+title: "Input要素やTextarea要素に入力された値を取得する"
+weight: 60
+ie_support: true
+---
+
+`<input>`要素や`<textarea>`要素に入力された値を取得したい時にご利用ください。
+
+以下の値を変更してください。
+
+- `selector`: 対象要素を特定するCSSセレクターの文字列
+
+```js
+/**
+ * 要素を探す
+ */
+var selector = "<TODO: REPLACE SELECTOR>";
+var element = document.querySelector(selector);
+
+/**
+ * 要素がなければ処理を中断する
+ */
+if (!element) {
+  throw new Error(
+    "Error: cannot find the element with selector(" + selector + ")."
+  );
+}
+
+/**
+ * 要素に入力された値を返す
+ */
+return element.value;
+```