หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

Autowebperf (AWP)

Autowebperf ให้กรอบการทำงานที่ยืดหยุ่นและปรับขนาดได้สำหรับการตรวจสอบประสิทธิภาพเว็บด้วยเครื่องมือตรวจสอบโดยพลการเช่น WebPagetest และ PageSpeedInsights ห้องสมุดนี้ช่วยให้นักพัฒนาสามารถรวบรวมการวัดได้อย่างสม่ำเสมอและจัดเก็บตัวชี้วัดไปยังที่เก็บข้อมูลที่ต้องการเช่นไฟล์ JSON ท้องถิ่น, Google Sheets, BigQuery หรือฐานข้อมูล SQL ภายใน บริษัท

ตรวจสอบ https://web.dev/autowebperf สำหรับการแนะนำ

มันทำงานอย่างไร

Autowebperf รับรายการ การทดสอบ จากแพลตฟอร์มที่เก็บข้อมูลโดยพลการเช่น JSON ในท้องถิ่น, Google Sheets, BigQuery หรือฐานข้อมูล SQL ที่โฮสต์ด้วยตนเอง ด้วยรายการการทดสอบจะดำเนินการตรวจสอบตามการทดสอบแต่ละครั้งจะรวบรวมการวัดจากแหล่งข้อมูลแต่ละรายการในรายการ ผลลัพธ์

กระบวนการเรียกใช้การตรวจสอบผ่านเครื่องมือวัด (เช่น WebPagetest) ถูกกำหนดไว้ใน ผู้รวบรวม แต่ละคน ตรรกะของการอ่านและการเขียนด้วยแพลตฟอร์มข้อมูล (เช่น JSON ท้องถิ่น) ถูกนำมาใช้ใน ตัวเชื่อมต่อ

คุณสมบัติไฮไลท์

  • ไลบรารีการตรวจสอบเว็บอัตโนมัติที่สามารถเสียบเข้ากับแพลตฟอร์มใด ๆ เช่น Google Sheets, GCP App Engine หรือเพียงแค่งาน cron ที่เขียนไปยังไฟล์ JSON
  • ให้ความสามารถในการเรียกใช้การทดสอบที่เกิดขึ้นซ้ำ ๆ ด้วยความถี่ที่ปรับแต่งได้ (เช่นรายวันรายสัปดาห์รายเดือน ฯลฯ ) เงื่อนไขเครือข่ายและการกำหนดค่าการตรวจสอบอื่น ๆ ฯลฯ
  • ผู้รวบรวมตัวชี้วัดได้รับการออกแบบเป็นโมดูลที่แยกออกจากรูปแบบข้อมูลเอาต์พุตและตรรกะอัตโนมัติ
  • โมดูลตัวเชื่อมต่อได้รับการออกแบบมาเพื่ออ่านรายการทดสอบและเขียนผลการตรวจสอบไปยังรูปแบบข้อมูลเฉพาะหรือแพลตฟอร์ม เช่นตัวเชื่อมต่อสำหรับไฟล์ CSV (ดูราย src/connectors/csv-connector )

สิ่งนี้เปรียบเทียบกับเครื่องมือวัดความเร็วที่เหลือของ Google ได้อย่างไร

Autowebperf ทำหน้าที่เป็นตัวรวบรวมการตรวจสอบประสิทธิภาพที่ทำให้กระบวนการตรวจสอบประสิทธิภาพและการรวบรวมการวัดผ่านเครื่องมือวัดความเร็วหลายอย่างโดยอัตโนมัติรวมถึง WebPagetest, PageSpeedInsights และ Chrome UX เนื่องจากเครื่องมือวัดความเร็วแต่ละตัวให้ตัวชี้วัดการตรวจสอบ AutoWebperf รวมผลลัพธ์และเขียนไปยังแพลตฟอร์มการจัดเก็บข้อมูลที่ต้องการเช่น JSON ในท้องถิ่นฐานข้อมูลบนคลาวด์หรือ Googlesheets

เร็ว

ก่อนอื่นโคลน AWP repo และเรียกใช้ NPM ติดตั้ง: 

 git clone https://github.com/GoogleChromeLabs/AutoWebPerf.git
npm install

เมื่อเสร็จแล้วให้ตรวจสอบการติดตั้งโดยเรียกใช้การทดสอบเดียวด้วยคำสั่งต่อไปนี้: 

 ./awp run examples/tests.json output/results.json

คำสั่งนี้ใช้ไฟล์ตัวอย่างใน examples/tests.json และส่งคืนผลลัพธ์ไปยัง output/results.json json

ในการเริ่มต้นการทดสอบที่เกิดขึ้นซ้ำคุณจะต้องรวมคุณสมบัติ recurring.frequency ในไฟล์ทดสอบและตั้งทริกเกอร์ถัดไปในไฟล์ทดสอบ ในการตั้งค่าเวลาทริกเกอร์ถัดไปและเรียกใช้การทดสอบครั้งเดียวให้ใช้คำสั่งนี้หลังจากเพิ่มคุณสมบัติ recurring.frequency ยังการทดสอบของคุณ: 

 ./awp recurring examples/tests-recurring.json output/results.json

หากสิ่งนี้ประสบความสำเร็จเวลาทริกเกอร์จะมีการปรับปรุงฐานบนความถี่ที่คุณเลือกและผลลัพธ์จะถูกเขียนไปยัง output/results.json json

เมื่อตั้งเวลาทริกเกอร์อย่างถูกต้องคุณสามารถทำการทดสอบอัตโนมัติในเวลา Triger ถัดไปด้วยคำสั่ง continue : 

 ./awp continue examples/tests-recurring.json output/results.json

สิ่งนี้จะเรียกใช้การทดสอบแต่ละครั้งโดยอัตโนมัติตามความถี่ที่ระบุ ข้อมูลเพิ่มเติมสามารถดูได้ด้านล่างในส่วน "เรียกใช้การทดสอบซ้ำ" ด้านล่าง

ตัวอย่างเพิ่มเติม

URL เดี่ยว: เพื่อทดสอบ URL เดียวผ่าน pagespeedInsights: 

 ./awp run url:https://www.thinkwithgoogle.com/ json:output/results.json

Pick Gatherer: เพื่อทดสอบ URL เดียวที่มีผู้รวบรวมเฉพาะเช่น PageSpeedInsights หรือ WebPagetest: 

 ./awp run --gatherers=psi url:https://web.dev json:output/results.json

ไฟล์ CSV: เพื่อเรียกใช้การทดสอบที่กำหนดไว้ในไฟล์ CSV และเขียนผลลัพธ์ไปยังไฟล์ JSON: 

 ./awp run csv:examples/tests.csv json:output/results.json

pagespeedinsights API: เพื่อเรียกใช้การทดสอบ pagespeedinsights ด้วยคีย์ API: 

 PSI_APIKEY=SAMPLE_KEY ./awp run examples/tests.json output/results.json

WebPagetest API: เพื่อเรียกใช้การทดสอบ webPagetest: 

 WPT_APIKEY=SAMPLE_KEY ./awp run examples/tests-wpt.json output/results.json

แทนที่กับภาคผนวก: เพื่อเรียกใช้การทดสอบและแทนที่ผลลัพธ์ที่มีอยู่ในไฟล์เอาต์พุต 

 ./awp run examples/tests.json output/results.json --override-results

ผู้รวบรวมที่มีอยู่:

  • WebPagetest - ดูเอกสาร/webPagetest.md สำหรับรายละเอียด
  • Pagespeed Insights - ดู DOCS/PSI.MD สำหรับรายละเอียด
  • Chrome UX Report API - ดูเอกสาร/cruxapi.md สำหรับรายละเอียด
  • Chrome UX Report BigQuery - ดู DOCS/CRUXBIGQUERY.MD สำหรับรายละเอียด

ตัวเชื่อมต่อที่มีอยู่:

  • JSON Connector - อ่านหรือเขียนไปยังไฟล์ JSON ท้องถิ่น นี่คือตัวเชื่อมต่อเริ่มต้นหากไม่ได้ระบุชื่อ conenctor ตัวอย่างเช่น: 
 ./awp run examples/tests.json output/results.json

อีกทางเลือกหนึ่งเพื่อระบุการใช้ตัวเชื่อมต่อ JSON สำหรับเส้นทาง Tests และเส้นทาง Results : 

 ./awp run json:/examples/tests.json json:output/results.json
  • ตัวเชื่อมต่อ CSV - อ่านหรือเขียนไปยังไฟล์ CSV ในท้องถิ่น ในการระบุโดยใช้ตัวเชื่อมต่อ CSV สำหรับเส้นทาง Tests และเส้นทาง Results : 
 ./awp run csv:/examples/tests.csv csv:output/results.csv
  • ตัวเชื่อมต่อ URL - สร้าง Test เพียงครั้งเดียวพร้อม URL เฉพาะสำหรับการตรวจสอบ เพื่อเรียกใช้การตรวจสอบด้วย Test เพียงครั้งเดียวด้วย URL เฉพาะ: 
 ./awp run url:https://example.com csv:output/results.csv

โปรดทราบว่าตัวเชื่อมต่อนี้ใช้งานได้กับเส้นทาง Tests เท่านั้นไม่ใช่สำหรับเส้นทาง Results

  • ตัวเชื่อมต่อ Google Sheets ดูเอกสาร/แผ่นงาน Connector.md สำหรับคำแนะนำโดยละเอียด

ใช้ AWP กับโหนด CLI

เรียกใช้การทดสอบ

คุณสามารถเรียกใช้งานต่อไปนี้ได้ตลอดเวลาสำหรับการพิมพ์ USAGES: 

 ./awp --help

ในการเรียกใช้การทดสอบคุณสามารถเรียกใช้คำสั่ง CLI ต่อไปนี้ด้วยการทดสอบที่กำหนด JSON เช่น examples/tests.json ซึ่งมีอาร์เรย์ของการทดสอบ คุณสามารถตรวจสอบ examples/tests.json สำหรับโครงสร้างข้อมูลของการทดสอบ 

 ./awp run examples/tests.json output/results.json

สิ่งนี้จะสร้างวัตถุผลลัพธ์ในเส้นทางที่กำหนดไปยัง results.json json

โดยค่าเริ่มต้น AWP จะใช้ JSON เป็นตัวเชื่อมต่อเริ่มต้นสำหรับทั้งการทดสอบการอ่านและการเขียนผลลัพธ์ อีกทางเลือกหนึ่งคุณสามารถระบุตัวเชื่อมต่อที่แตกต่างกันในรูปแบบของ <connector>:<path>

เช่นการเรียกใช้การทดสอบที่กำหนดไว้ใน CSV และเขียนผลลัพธ์ใน JSON: 

 ./awp run csv:examples/tests.csv json:output/results.csv

ดึงผลการทดสอบ

สำหรับแพลตฟอร์มการตรวจสอบบางอย่างเช่น WebPagetest การทดสอบแต่ละครั้งอาจใช้เวลาสองสามนาทีในการดึงผลลัพธ์จริง สำหรับการตรวจสอบ แบบอะซิงโครนัส ประเภทนี้แต่ละผลลัพธ์จะอยู่ในสถานะ "ส่ง" คุณจะต้องดึงผลลัพธ์อย่างชัดเจนในภายหลัง

เรียกใช้สิ่งต่อไปนี้เพื่อดึงตัวชี้วัดสุดท้ายของผลลัพธ์ใน results.json json 

 ./awp retrieve examples/tests.json output/results.json

สิ่งนี้จะดึงข้อมูลตัวชี้วัดสำหรับแพลตฟอร์มการตรวจสอบทั้งหมดและอัปเดตไปยังวัตถุผลลัพธ์ใน output/results.json json คุณสามารถตรวจสอบ examples/results.json สำหรับรายละเอียดในวัตถุผลลัพธ์

เรียกใช้การทดสอบที่เกิดซ้ำ

หากคุณต้องการตั้งค่าการทดสอบที่เกิดขึ้นอีกคุณสามารถกำหนดวัตถุ recurring ที่มี frequency สำหรับการทดสอบนั้น 

 ./awp recurring examples/tests-recurring.json output/results.json

สิ่งนี้จะสร้างวัตถุผลลัพธ์ใน results.json และอัปเดตเวลาทริกเกอร์ถัดไปไปยังวัตถุทดสอบดั้งเดิมใน tests.json json เช่นวัตถุทดสอบที่อัปเดตจะมีลักษณะดังต่อไปนี้ด้วยการอัปเดต nextTriggerTimestamp 

 {
  "label": "web.dev",
  "url": "https://web.dev",
  "recurring": {
    "frequency": "Daily",
    "nextTriggerTimestamp": 1599692305567,
    "activatedFrequency": "Daily"
  },
  "psi": {
    "settings": {
      "locale": "en-GB",
      "strategy": "mobile"
    }
  }
}

nextTriggerTimestamp จะได้รับการอัปเดตเป็นวันถัดไปตามการประทับเวลาก่อนหน้า นี่คือการป้องกันการวิ่งซ้ำด้วยการทดสอบเดียวกันและเพื่อรับประกันว่าการทดสอบนี้จะดำเนินการเพียงครั้งเดียวต่อวัน

ตั้งค่างาน cron เพื่อเรียกใช้การทดสอบที่เกิดขึ้นซ้ำ

ในระบบปฏิบัติการที่เหมือน UNIX ส่วนใหญ่คุณสามารถตั้งค่างาน cron เพื่อเรียกใช้ AWP CLI เป็นระยะ

ตัวอย่างเช่นใน MacOS คุณสามารถเรียกใช้คำสั่งต่อไปนี้เพื่อตั้งค่างาน cron ประจำวันด้วย AWP: 

 # Edit the cronjob with a text editor.
EDITOR=nano crontab -e

เพิ่มบรรทัดต่อไปนี้ไปยัง crontab สำหรับการวิ่งทุกวันเวลา 12:00 น. ตอนเที่ยง โปรดทราบว่าสิ่งนี้ขึ้นอยู่กับเวลาของระบบที่มันทำงาน AWP 

 0 12 * * * PSI_APIKEY=SAMPLE_KEY cd ~/workspace/awp && ./awp run examples/tests.json csv:output/results-recurring.csv

เรียกใช้การทดสอบด้วยส่วนขยาย

ส่วนขยายเป็นโมดูลเพื่อช่วย AWP ในการทดสอบด้วยกระบวนการและการคำนวณเพิ่มเติม ตัวอย่างเช่นการขยาย budgets สามารถเพิ่มงบประมาณประสิทธิภาพและคำนวณเดลต้าระหว่างเป้าหมายและตัวชี้วัดผลลัพธ์

เพื่อทำงานด้วยส่วนขยาย: 

 ./awp run examples/tests.json output/results.json --extensions=budgets

การทดสอบและผลลัพธ์

กำหนดการทดสอบ

รายการการทดสอบเป็นเพียงอาร์เรย์ของวัตถุทดสอบเช่นการทดสอบตัวอย่างด้านล่าง หรือตรวจสอบ src/examples/tests.js สำหรับตัวอย่างรายละเอียดของรายการทดสอบ 

 [{
  "label": "Test-1",
  "url": "example1.com",
  "webpagetest": {
    ...
  }
}, {
  "label": "Test-2",
  "url": "example2.com",
  "psi": {
    ...
  }
}]

แต่ละวัตถุ Test กำหนดว่าการตรวจสอบใดที่จะเรียกใช้โดยกำหนดคุณสมบัติของ gatherers ตัวอย่างเช่น Test ครั้งแรกมีคุณสมบัติ webpagetest ซึ่งกำหนดการกำหนดค่าการเรียกใช้การตรวจสอบ webPagetest Test ครั้งที่สองมีคุณสมบัติ psi ที่กำหนดวิธีเรียกใช้การตรวจสอบ PageSpeedInsights

สร้างผลลัพธ์

หลังจากเรียกใช้การทดสอบรายการ Results จะถูกสร้างขึ้นด้านล่าง แต่ละ Result มีตัวชี้วัดที่สอดคล้องกันกับ gatherers ที่กำหนดไว้ล่วงหน้าเช่น WebPagetest และ PagespeedInsights ดูตัวอย่างด้านล่าง 

 [{
  "label": "Test-1",
  "url": "example1.com",
  "webpagetest": {
    "metrics": {
      FirstContentfulPaint: 900,
      ...
    }
  }  
}, {
  "label": "Test-2",
  "url": "example2.com",
  "psi": {
    "metrics": {
      FirstContentfulPaint: 900,
      ...
    }
  }  
}]

ตัวแปรสิ่งแวดล้อม

conenctors หรือผู้รวบรวมบางคนอาจต้องการตัวแปรสิ่งแวดล้อมอย่างน้อยหนึ่งตัวเช่นคีย์ API หรือเส้นทางสู่บัญชีบริการ ตัวอย่างเช่นการรันกับตัวรวบรวม CRUX API ต้องใช้คีย์ CRUX API

หากต้องการผ่านตัวแปรสภาพแวดล้อมใน CLI ให้เรียกใช้คำสั่งด้วยการใช้งานปกติของสภาพแวดล้อม VARS: 

 CRUX_APIKEY=<YOUR_KEY> ./awp run url:https://wev.dev/ json:output/results.json

ผู้รวบรวม

AWP รองรับผู้รวบรวมการตรวจสอบต่อไปนี้ โปรดตรวจสอบเอกสารที่เกี่ยวข้องสำหรับรายละเอียด

WebPagetest

WebPagetest Gatherer ดำเนินการทดสอบผ่านจุดสิ้นสุดของ WebPagetest สาธารณะหรืออินสแตนซ์ WebPagetest ส่วนตัวที่กำหนดเอง

ดู docs/webpagetest.md สำหรับรายละเอียดเพิ่มเติมสำหรับการใช้งานของผู้รวบรวม webpagetest

ข้อมูลเชิงลึก pagespeed

ผู้รวบรวมข้อมูลเชิงลึก Pagespeed ดำเนินการทดสอบผ่าน PAGESPEED Insights API สาธารณะ

ดูเอกสาร/psi.md สำหรับรายละเอียดเพิ่มเติมสำหรับการใช้งานของผู้รวบรวม PSI

Chrome UX Report API (CRUX API)

ตัวรวบรวม CRUX API รวบรวมตัวชี้วัดประสิทธิภาพผ่านรายงาน Chrome UX API

ดูเอกสาร/cruxapi.md สำหรับรายละเอียดเพิ่มเติมสำหรับการใช้งานของผู้รวบรวม Crux API

ประวัติรายงาน Chrome UX (CRUX ผ่าน BigQuery)

Crux BigQuery Gatherer รวบรวมตัวชี้วัดประสิทธิภาพผ่านรายงาน Chrome UX ด้วยโครงการ Google BigQuery สาธารณะ โปรด Noet ว่าคุณจะต้องตั้งค่าโครงการ Google Cloud เพื่อสอบถามตาราง BigQuery สาธารณะ

ดู docs/cruxbigquery.md สำหรับรายละเอียดเพิ่มเติมสำหรับการใช้งานของผู้รวบรวม Crux API

ออกแบบ

AWP ได้รับการออกแบบด้วยโมดูลรวมถึงโมดูลสำหรับการเรียกใช้การตรวจสอบด้วย webPagetest, pageSpeedInsights หรือเครื่องมืออื่น ๆ และโมดูลสำหรับการอ่าน/เขียนข้อมูลจากแพลตฟอร์มข้อมูลเช่น JSON, Googlesheets หรือบริการคลาวด์

ในมุมมองระดับสูงมีสามประเภทของโมดูล:

  • Gatherer - ผู้รวบรวมดำเนินการตรวจสอบและสร้างตัวชี้วัด
  • Connector - ตัวเชื่อมต่ออ่านการทดสอบการกำหนดค่าจากและเขียนผลลัพธ์ไปยังแพลตฟอร์มข้อมูลเช่นไฟล์ JSON ในท้องถิ่นหรือด้วย Google Sheets
  • ส่วนขยาย - ส่วนขยายเพิ่มตัวชี้วัดหรือข้อมูลเพิ่มเติมไม่ว่าจะก่อนหรือหลังเรียกใช้การตรวจสอบ

เครื่องยนต์ AWP ใช้โครงสร้างวัตถุ JavaScript สองตัวสำหรับการเรียกใช้การตรวจสอบและรวบรวมตัวชี้วัด

  • ทดสอบ - วัตถุที่มีการกำหนดค่าการตรวจสอบสำหรับงานทดสอบหนึ่งงานเช่น URL, วิธีการตรวจสอบหรือการกำหนดค่าส่วนขยาย คุณสามารถอ้างถึง examples/tests.json สำหรับวัตถุทดสอบจริง
  • ผลลัพธ์ - วัตถุที่มีการกำหนดค่าการตรวจสอบตัวชี้วัดและสถานะโดยรวม คุณสามารถอ้างถึง examples/results.json สำหรับวัตถุผลลัพธ์จริง

ขั้นตอนการตรวจสอบ

เพื่อจัดการกับเครื่องมือตรวจสอบแบบอะซิงโครนัสเช่น WebPagetest AWP จะแบ่งวงจรการตรวจสอบออกเป็นสามขั้นตอนของการกระทำ:

  • Run - การกระทำนี้ใช้รายการ Tests และสร้างรายการของวัตถุ Results
  • การเกิดซ้ำ - คล้ายกับ รัน การกระทำนี้จะใช้รายการ Tests สร้างรายการ Results และอัปเดต NextTriggerTimestamp สำหรับ Test ที่เกิดขึ้นซ้ำแต่ละครั้ง การกระทำนี้มีประโยชน์เมื่อทำงานกับงานเป็นระยะหรือตามตัวจับเวลาเช่นงาน cron
  • เรียกคืน - การดำเนินการนี้จะสแกนรายการผลลัพธ์และรวบรวมตัวชี้วัดเมื่อผลลัพธ์ไม่ได้อยู่ในสถานะ Retrieved

การกำหนดค่า AWP

ในการตั้งค่าโมดูลและการกำหนดค่าของพวกเขาจำเป็นต้องมีการกำหนดค่า AWP โดยรวมเป็นวัตถุ JavaScript

การกำหนดค่า AWP มีคุณสมบัติที่จำเป็นต่อไปนี้:

  • connector : ชื่อของตัวเชื่อมต่อ
  • helper : ผู้ช่วยสำหรับตัวเชื่อมต่อที่เฉพาะเจาะจงรวมถึง API Handler และฟังก์ชั่นผู้ช่วยอื่น ๆ ซึ่งจะใช้ในผู้รวบรวมและส่วนขยาย
  • dataSources : อาร์เรย์ของแหล่งตรวจสอบเช่น webpagetest หรือ psi แหล่งข้อมูลแต่ละแหล่งจะต้องมีไฟล์รวบรวมที่สอดคล้องกันในโฟลเดอร์ src/gatherers
  • extensions : อาร์เรย์ของส่วนขยาย แต่ละส่วนขยายจะต้องมีไฟล์ส่วนขยายที่สอดคล้องกันใน src/extensions

คุณสมบัติทางเลือกอื่น ๆ :

  • verbose : จะพิมพ์ข้อความ verbose หรือไม่
  • debug : จะพิมพ์ข้อความแก้ไขข้อบกพร่องหรือไม่

ตัวอย่างการกำหนดค่าต่อไปนี้มาจาก examples/awp-config.js : 

 {
  connector: 'JSON',
  helper: 'Node',
  dataSources: ['webpagetest'],
  json: { // Config for JSON Connector.
    tests: 'tests.json',
    results: 'results.json',
  },
  extensions: [
    'budgets',
  ],
  budgets: { // Config for Budgets extension.
    dataSource: 'webpagetest',
  },
  verbose: true,
  debug: false,
}

ด้วยตัวอย่างการกำหนดค่าด้านบนจะใช้ตัวเชื่อมต่อ JSON ซึ่งอ่านและเขียนการทดสอบและผลลัพธ์เป็นไฟล์ JSON ดู examples/tests.json และ examples/results.json สำหรับตัวอย่าง

นอกจากคุณสมบัติพื้นฐานแล้วยังมีคุณสมบัติเพิ่มเติมสองสามประการที่ใช้โดยโมดูล:

  • คุณสมบัติ json เป็นการกำหนดค่าสำหรับ JSONCONNECTOR
  • คุณสมบัติ budgets เป็นการกำหนดค่าสำหรับ BudgetSextension

การใช้ Autowebperf Core

ตัวอย่างของการสร้างอินสแตนซ์ใหม่ของ AWP: 

 let awp = new AutoWebPerf({
  connector: 'JSON',
  helper: 'Node',
  dataSources: ['webpagetest'],
  extensions: extensions,
  json: { // Config for JSON connector.
    tests: argv['tests'],
    results: argv['results'],
  },
  verbose: verbose,
  debug: debug,
});

เพื่อส่งการทดสอบทั้งหมด: 

 awp.run();

ในการส่งการทดสอบเฉพาะโดยใช้ตัวกรอง: สิ่งนี้จะเรียกใช้การทดสอบที่มี ID = 1 และคุณสมบัติที่เลือก = จริง 

 awp.run({
  filters: ['id="1"', 'selected'],
});

ในการดึงผลลัพธ์ที่ค้างอยู่ทั้งหมดให้กรองด้วยสถานะ! == "ดึง" 

 awp.retrieve({
  filters: ['status!=="Retrieved"'],
});
  • สำหรับการใช้งาน PatternFilter ขั้นสูงเพิ่มเติมโปรดตรวจสอบ src/utils/pattern-filter.js พร้อมตัวอย่างเพิ่มเติม

ในการเรียกใช้การทดสอบที่เกิดขึ้นซ้ำ: 

 // This will run the actual audit and update the nextTriggerTimestamp.
awp.recurring();

ในการเรียกใช้การทดสอบด้วยส่วนขยายเฉพาะ: 

 // This will override the extension list defined in the awpConfig.
awp.run({
  extensions: ['budgets']
})

โมดูลรวบรวม

คลาส Gatherer ขยาย src/gatherers/gatherer.js และแทนที่วิธีการต่อไปนี้:

  • constructor(config, apiHelper, options) :

    • config : การกำหนดค่าที่กำหนดไว้ในคุณสมบัติที่มีชื่อรวบรวมนี้ในการกำหนดค่า AWP เครื่องมือตรวจสอบบางอย่างเช่น WebPagetest หรือ PagespeedInsights ต้องการคีย์ API คีย์ API สำหรับผู้รวบรวมอยู่ใน config.apiKey
    • options : การตั้งค่าเพิ่มเติมเช่น verbose และ debug

  • run(test, options) :

    • test : วัตถุ Test สำหรับการตรวจสอบนี้ ข้อมูลที่จำเป็นสำหรับการรวบรวมนี้ (เช่นการตั้งค่าหรือข้อมูลเมตา) จะอยู่ในคุณสมบัติที่มีชื่อของผู้รวบรวม เช่นข้อมูลสำหรับ WebPagetest จะอยู่ใน webpagetest ของวัตถุ Test นี้
    • options : การตั้งค่าเพิ่มเติม

  • retrieve(result, options) :

    • result : วัตถุ Result เพื่อดึงตัวชี้วัดด้วย ข้อมูลที่จำเป็นสำหรับผู้รวบรวมนี้จะอยู่ในสถานที่ให้บริการพร้อมชื่อของผู้รวบรวม เช่นข้อมูลและตัวชี้วัดจะอยู่ใน webpagetest ของวัตถุ Result นี้
    • options : การตั้งค่าเพิ่มเติมเช่น verbose และ debug

โมดูลตัวเชื่อมต่อ

คลาสเชื่อมต่อขยาย src/connectors/connector.js และแทนที่วิธีการต่อไปนี้:

  • constructor(config, apiHandler) :

    • config : กำหนดค่าที่กำหนดไว้ในคุณสมบัติที่มีชื่อตัวเชื่อมต่อนี้ในการกำหนดค่า AWP
    • apiHandler : อินสแตนซ์ Handler API ที่ใช้สำหรับการโทร API

  • getConfig() : วิธีการส่งคืนวัตถุการกำหนดค่าเพิ่มเติมของตัวเชื่อมต่อ วัตถุกำหนดค่านี้ขึ้นอยู่กับตำแหน่งที่ตัวเชื่อมต่อนี้จัดเก็บการตั้งค่าเพิ่มเติมรวมถึงคีย์ API สำหรับผู้รวบรวม ตัวอย่างเช่น JsonConnector ใช้ tests.json และอ่านการตั้งค่าเพิ่มเติมจากคุณสมบัติ config รวมถึงคีย์ API สำหรับผู้รวบรวมแต่ละคน

  • getTestList(options) : วิธีการส่งคืนรายการ Tests เป็นอาร์เรย์

  • updateTestList(newTests, options) : วิธีการอัปเดตรายการ Tests ตามรายการ Tests ใหม่

  • getResultList(options) : วิธีการส่งคืนรายการ Results เป็นอาร์เรย์

  • appendResultList(newResults, options) : วิธีการต่อท้าย Results ใหม่ในตอนท้ายของรายการ Results ปัจจุบัน

  • updateResultList(newResults, options) : วิธีการอัปเดต Results ที่มีอยู่ในรายการ Results ปัจจุบัน

โมดูลส่วนขยาย

คลาสส่วนขยายขยาย src/extensions/extension.js และแทนที่วิธีการต่อไปนี้:

  • constructor(config) :
    • config : การกำหนดค่าที่กำหนดไว้ในคุณสมบัติที่มีชื่อส่วนขยายนี้ในการกำหนดค่า AWP
  • beforeRun(context) : วิธีการก่อนดำเนินการ รัน ขั้นตอนสำหรับ Test
    • context.test : วัตถุ Test ที่สอดคล้องกัน
  • afterRun(context) : วิธีการหลังจากดำเนินการขั้นตอน การรัน สำหรับ Test
    • context.test : วัตถุ Test ที่สอดคล้องกัน
    • context.result : วัตถุ Result ที่สอดคล้องกัน
  • beforeAllRuns(context) : วิธีการก่อนดำเนินการ รัน ขั้นตอน
    • context.tests : วัตถุ Test ทั้งหมดใน การทำงาน นี้
  • afterAllRuns(context) : วิธีการหลังจากดำเนินการ รัน ขั้นตอน
    • context.tests : วัตถุ Test ทั้งหมดใน การทำงาน นี้
    • context.results : วัตถุ Result ทั้งหมดใน การทำงาน นี้
  • beforeRetrieve(context) : วิธีการก่อนที่จะดำเนินการ ดึง ขั้นตอนสำหรับ Result
    • context.result : วัตถุ Result ที่สอดคล้องกัน
  • afterRetrieve(context) : วิธีการหลังจากดำเนินการ ดึง ขั้นตอนสำหรับ Result
    • context.result : วัตถุ Result ที่สอดคล้องกัน
  • beforeAllRetrieves(context) : วิธีการก่อนที่จะดำเนิน การดึง ขั้นตอน
    • context.result : วัตถุ Result ที่สอดคล้องกัน
  • afterAllRetrieves(context) : วิธีการหลังจากดำเนินการ ดึง ขั้นตอน
    • context.result : วัตถุ Result ที่สอดคล้องกัน

วัตถุทดสอบ

วัตถุ Test มาตรฐานมีคุณสมบัติต่อไปนี้:

(คุณสามารถอ้างถึง examples/tests.json สำหรับตัวอย่าง)

  • selected : จะดำเนินการ รัน สำหรับ Test นี้หรือไม่
  • label : ชื่อของ Test นี้
  • url : URL ในการตรวจสอบ
  • recurring : การตั้งค่าสำหรับการตรวจสอบที่เกิดขึ้นซ้ำ
    • frequency : สตริงความถี่ที่กำหนดไว้ใน src/common/frequency.js เช่น 'รายวัน', 'รายสัปดาห์' หรือ 'รายเดือน'

การตั้งค่าเฉพาะผู้รวบรวมจะอยู่ในทรัพย์สินของตัวเองพร้อมชื่อของผู้รวบรวมในกรณีที่ต่ำกว่า ตัวอย่างเช่นการตั้งค่าสำหรับ WebPagetests จะเป็น:

  • webpagetest
    • settings : การตั้งค่าวัตถุมีตำแหน่งการตรวจสอบการเชื่อมต่อ ฯลฯ
    • metadata : วัตถุข้อมูลเมตามี ID ของ WebPagetests, JSON URL ฯลฯ

วัตถุผลลัพธ์

วัตถุ Result มาตรฐานมีคุณสมบัติต่อไปนี้:

  • selected : จะทำการ ดึง Result นี้หรือไม่
  • id : ID ที่ไม่ซ้ำกันโดยอัตโนมัติสำหรับ Result นี้
  • type : การตรวจสอบ Single หรือ Recurring
  • status : Submitted Retrieved หรือ Error อ้างถึง src/common/status.js สำหรับรายละเอียด
  • label : ฉลากสตริงสำหรับ Result นี้ ฉลากนี้สืบทอดมาจากวัตถุ Test ดั้งเดิม
  • url : URL ที่ตรวจสอบแล้ว
  • createdTimestamp : เมื่อ Result นี้ถูกสร้างขึ้น
  • modifiedTimestamp : เมื่อ Result นี้ได้รับการแก้ไขครั้งล่าสุด

ตัวชี้วัดมาตรฐาน

ชื่อเมตริกทั้งหมดที่ใช้ใน AWP จะต้องติดตามชื่อที่ละเอียดอ่อนตัวพิมพ์ใหญ่ ดูรายการเต็มของตัวชี้วัดมาตรฐานใน src/common/metrics.js

  • ตัวชี้วัดเวลา

    • TimeToFirstByte
    • FirstPaint
    • FirstMeaningfulPaint
    • FirstContentfulPaint
    • VisualComplete
    • SpeedIndex
    • DOMContentLoaded
    • LoadEvent
    • TimeToInteractive
    • TotalBlockingTime
    • FirstCPUIdle
    • FirstInputDelay
    • LargestContentfulPaint

  • ขนาดทรัพยากร

    • HTML
    • Javascript
    • CSS
    • Fonts
    • Images
    • Videos

  • จำนวนทรัพยากร

    • DOMElements
    • Connections
    • Requests

  • คะแนนทรัพยากร

    • Performance
    • ProgressiveWebApp

โครงสร้างโฟลเดอร์ต้นทาง

ซอร์สโค้ดทั้งหมดสำหรับฟังก์ชั่นหลักอยู่ในโฟลเดอร์ src ไฟล์ถูกจัดระเบียบลงในโฟลเดอร์ย่อยต่อไปนี้:

  • common : คลาสทั่วไปและคำจำกัดความเช่นสถานะความถี่ตัวชี้วัด ฯลฯ
  • connectors : คลาสเชื่อมต่อ
  • extensions : คลาสส่วนขยาย
  • gatherers : ชั้นเรียนรวบรวม
  • utils : สาธารณูปโภคและเครื่องมือ

การทดสอบหน่วย

เรียกใช้คำสั่งต่อไปนี้เพื่อเรียกใช้การทดสอบหน่วย: 

 npm test

ในการเรียกใช้ข้อมูลจำเพาะการทดสอบแต่ละรายการคุณสามารถติดตั้งโมดูล JEST NPM ไปยังเครื่องในเครื่องของคุณ: 

 npm install -g jest
jest test/some-module.test.js

การออกแบบการทดสอบหน่วย

การทดสอบหน่วยจะขึ้นอยู่กับกรอบการทดสอบ jest unit การทดสอบหน่วยทั้งหมดจะอยู่ในโฟลเดอร์ ./test และจัดเป็นโฟลเดอร์ย่อยที่สอดคล้องกันของตัวเองเช่นเดียวกับโครงสร้างเดียวกับในโฟลเดอร์ src

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด