2017-08-21 22 views
1

私はこれがちょっとしたスタンプと聞こえますが、ウェブページのいくつかの機能を簡単にテストできるように、簡単なコマンドを自動化できるjavascriptを作成できるかどうかを知りたいと思います。作ります。のは、私がどのように見える私のページでテキスト領域を持っているとしましょう:Javascript:Textareaを選択してから入力してください

<textarea class="some-class"></textarea> 

今、私はJavaScriptコンソールを開き、次のないコマンド&ペーストしたいと思います:

  1. セットがに焦点を当てをテキスト領域。
  2. テキストエリアの値を変更します
  3. キーボードで「Enter」キーをシミュレートします。

私はセレンのような他のオートメーションを使うことができると知っていますが、これは私がショートカットにしたい単純なタスクです。これどうやってするの?私は純粋なjavascriptが好きですが、実際に必要な場合はjqueryを使用して作業することもできます。 jQueryを使って

+0

ちょうどコンソールから関数を呼び出して.... – Eric

+0

@エリック私はコンソールでもその関数を作成したいと思いますが、上記のステップを実行する関数を書くことは私の主な問題です。今の –

+0

JavaScriptを使って文字領域をフォーカスし、価値を追加し、キーボードのEnterキーをシミュレートすることができますか? @Eric –

答えて

1

それがこれを行うために非常に簡単です:あなたは、次のいずれかの発生前に各イベントが完全に処理させたい場合は、各ステップの非同期を行うことができます

function example() { 
 
    $('.mytextarea') 
 
    .focus()    // Sets focus on the text-area 
 
    .val('CHANGE')  // Changes the value of the textarea 
 
    .trigger("keydown", { // Trigger Enter (key 13) 
 
     which: 13 
 
    });  
 
} 
 

 
$('button').on('click', example);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea class="mytextarea"></textarea> 
 
<button type="button">Run</button>

を:

function step(cb, text) { 
 
    $('#step').text(`${text}...`); 
 
    return new Promise(
 
    resolve => setTimeout(() => { 
 
     cb(); 
 
     resolve(); 
 
    }, 500) 
 
); 
 
} 
 

 
function example() { 
 
    const $textarea = $('.mytextarea') 
 
    step(() => $textarea.focus(), 'focusing') 
 
    .then(() => 
 
    step(() => $textarea.val('CHANGE'), 'changing') 
 
) 
 
    .then(() => 
 
    step(() => $textarea.trigger("keydown", { 
 
     which: 13 
 
    }), 'triggering') 
 
); 
 
} 
 

 
$('button').on('click', example);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea class="mytextarea"></textarea> 
 
<button type="button">Run</button> 
 
<i id="step"></i>

+1

これは、ここでテストされているものによっては問題になるかもしれませんが、keydownイベントを起動するだけでイベントが発生することに注意する価値があります - 文字を 'textarea'に挿入しませんkeyCode 13のkeydownイベントが発生しても、改行は挿入されません)。 –

関連する問題