からのウェブサイトの自動化

このチュートリアルでは、任意の外部ツールやフレームワークを必要とせずに、Webページ上のタスクを自動化するための単純なコードスニペットを作成します.
あなた自身が特定のウェブサイト上で同じものを繰り返し行う必要がある場合は、おそらくこれを試してください.
また、JavaScriptとdevtoolsに楽しさと良い方法です.
あなたはブラウザのゲームで遊ぶことができるとハイスコアを打つためにしようとすると、ちょうど私はゲームで秒(CPS)毎秒400のハイスコアを得た方法.警察に伝えてはいけない😂]

それで、それに正しくなりましょう.

私たちは何を建てているの

このポストの目的のために、我々はこれを自動化するでしょうhttps://invoice-generator.com/ 請求書をオンラインで作成することができますウェブサイト.特定のクライアントのために、これら以外のほとんどの入力をほとんど変更しないと仮定しましょう.

請求書番号

労働時間単位

日付(自動生成)

JSセレクタの検査

私たちは私たちのdevtoolを開くことができる要素を検査し、私たちが動作したい任意の要素にアクセスするためのJSセレクタを取得します.例えば、invoice number 入力要素、devtoolsの「要素」タブの要素を右クリックし、「コピー」「js - path」コピーを選択します

我々が相互作用する要素のリスト

const invoiceNumber = document.querySelector(
  "div.papers > div  div.title > div > div > input"
);
const billTo = document.querySelector(
  "div.papers > div > div:nth-child(1) > div.col.contact-info > div.row.bill-to-details > div:nth-child(1) textarea"
);
const invoiceFrom = document.querySelector(
  "div.papers > div > div:nth-child(1) > div.col.contact-info > div.contact.from textarea"
);
// date format "Dec 9,2021"
const dateInput = document.querySelector("#dp1639600324282");
const itemDescription = document.querySelector(
  "div.papers div.items-holder > div.items-table div.name textarea"
);
const itemQuantity = document.querySelector(
  "div.papers div.items-holder > div.items-table div.quantity > input"
);
const itemRate = document.querySelector(
  "div.papers div.items-holder > div.items-table div.unit_cost input"
);

次に、入力値操作を実行する関数を作成します

function promptsForUser() {
  invoiceNumber.value = prompt("Enter the invoic number");
  itemQuantity.value = prompt("Total hours worked");

    itemQuantity.dispatchEvent(new Event("change"))
}

function setConstantValue() {
  let d = new Date();
  const months = ["Jan","Feb","Mar","April","May","June","Aug","Sept","Oct","Nov","Dec",];
  dateInput.value = `${months[d.getMonth() - 1]} ${d.getDate()}, ${d.getFullYear()}`;
  invoiceFrom.value = "Ichigo Kurosaki,\nSubstitute Soul Reaper";
  billTo.value = "XYZ Limited,\nMugen Train District";
    itemDescription.value = "Bankai night shift";
  itemRate.value = "10";
}

promptsForUser()
setConstantValue()

The setConstantConstant 関数は、入力要素の値を、スクリプトとpromptsForUser スクリプトユーザーからの情報を取得する関数.
また、請求書の合計金額はchange 我々が手動でAを派遣したので、量からのイベントchange イベント.

コードのスニペットとして保存する

devtoolsSnippets ブラウザでスクリプトを保存し、再利用可能にする
devtoolsのソースタブからスニペットエディタを見つけます

新しいスニペットを作成し、すべてのコードを貼り付けます.

ショーケース

結論

あなたがウェブサイトの制御をしないならば、このアプローチの欠点は、要素セレクタがいつでも変わることができるということです
それでも、それはDevToolsと遊ぶのに最適な方法です.ローカルストレージ、クッキー、JavaScriptの実行を一時停止し、デバッガを再生することができます.
楽しい2番目のハイスコアごとに私の400をクリックしようとしている!