آموزش راننده وب IO با استفاده از یک وب سایت زنده و مثالهای کاری: 8 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:57

آموزش راننده وب IO با استفاده از یک وب سایت زنده و نمونه کارها

آخرین به روز رسانی: 2015/07/26

(وقتی این دستورالعملها را با جزئیات و مثالهای بیشتر به روز می کنم ، اغلب دوباره مراجعه کنید)

زمینه

به تازگی یک چالش جالب برایم پیش آمد. من نیاز داشتم که تست خودکار را به بخش پرسش و پاسخ با تجربه فنی بسیار کم و بدون سابقه برنامه نویسی معرفی کنم.

این در واقع دو (2) چالش جداگانه بود. اولین مورد شناسایی فناوری های انجام آزمایش خودکار بود. مورد دوم آموزش بخش Q/A بود.

مقاله فقط به فناوریهای مورد استفاده و آنچه در این فرآیند آموختم پرداخته است.

فن آوری ها به خوبی کار کردند ، اما من واقعاً مجبور بودم اطلاعاتی را جستجو کنم و ساعت های زیادی را صرف کشف مسائل کردم.

به سختی در اینترنت اطلاعاتی در مورد این فناوری ها که همه با هم کار می کنند پیدا کردم.

من می خواستم این اطلاعات را به اشتراک بگذارم ، بنابراین این مقاله را به همراه نمونه اسکریپت های آزمایشی و یک وب سایت آزمایشی نوشتم تا اسکریپت ها را در مقابل اجرا کنم.

همه اسکریپت های آزمایشی را می توانید در github پیدا کنید و سایت تست کار در سایت تست آموزش Web Driver IO قرار دارد

امیدوارم برایتان مفید بوده باشد. اگر شما انجاممیدهید لطفا مرا مطلع کنید.

اهداف استفاده از فناوری های زیر:

• تست عملکرد وب سایت
• قابلیت جاوا اسکریپت را آزمایش کنید
• قابل اجرا به صورت دستی
• می تواند به صورت خودکار اجرا شود

• یادگیری زبان برای برنامه نویسان آسان است

  پرسش و پاسخ پرسنل با دانش اولیه HTML و JavaScript

• فقط از نرم افزار منبع باز استفاده کنید

فن آوری ها

لیست فناوری هایی که انتخاب می کنم:

• mocha - test runner - اسکریپت های تست را اجرا می کند
• mustjs - کتابخانه تأیید
• webdriverio - پیوندهای کنترل مرورگر (پیوندهای زبان)
• سلنیوم - کارخانه انتزاع و اجرای مرورگر

• مرورگر/درایورهای تلفن همراه + مرورگرها

  • Firefox (فقط مرورگر)
  • Chrome (مرورگر و درایور)
  • IE (مرورگر و راننده)
  • Safari (افزونه مرورگر و درایور)

مرحله 1: نصب نرم افزار

برای شروع باید سرور مستقل Node JS ، Web Driver IO ، Mocha ، Should و Selenium را نصب کرده باشید.

در اینجا دستورالعمل نصب ویندوز 7 آمده است.

(من یک کاربر مک/لینوکس هستم اما مجبور بودم همه چیز را بر روی دستگاه های ویندوز 7 نصب کنم ، به همین دلیل آن را برای مرجع شما قرار داده ام. روش نصب بر روی مک/لینوکس مشابه است. لطفاً برای اطلاعات بیشتر با مراجع آنلاین مشورت کنید. اطلاعات.)

از مرورگر:

• نصب Node شامل NPM (Node Package Manager)

• به https://nodejs.org/ بروید

  • روی نصب کلیک کنید
  • فایل را ذخیره و اجرا کنید
  • تنظیم مسیر و متغیر (NODE_PATH)

  • به Control Panel-> System and Security-> System بروید

    • تنظیمات پیشرفته سیستم

    • تنظیم محیط (متغیرهای کاربر)

      • به PATH اضافه کنید

        C: / Users {USERNAME} AppData / Roaming / npm؛

      • NODE_PATH (متغیرهای سیستم) را اضافه کنید

        C: / Users {USERNAME} AppData / Roaming / npm / node_modules

توجه: من تمام نرم افزارهای زیر را با استفاده از گزینه npm global (-g) نصب کردم. این معمولاً توصیه نمی شود ، اما برای این نصب باید به صورت سراسری نصب کنم زیرا در چندین پروژه استفاده می شود.

خط فرمان (cmd) را باز کنید:

(سرپرست کاربر محلی)

• سلنیوم "web driver IO" را نصب کنید

  • npm webdriverio -g را نصب کنید

    با این کار درایور وب IO بصورت جهانی بر روی دستگاه شما نصب می شود

• نرم افزار دونده آزمایشی "mocha" را نصب کنید

  • npm mocha -g را نصب کنید

    با این کار موکا بصورت جهانی روی دستگاه شما نصب می شود

• کتابخانه تأیید "باید" را نصب کنید

  • npm نصب باید -g

    با این کار "باید" به صورت جهانی بر روی دستگاه شما نصب می شود

• سرور مستقل سلنیوم را نصب کنید

  • به https://www.seleniumhq.org/download/ بروید
  • فایل jar را بارگیری کرده و وارد فهرست "سلنیوم" شوید.

• مرورگرها و درایورهای مرورگر را برای آزمایش نصب کنید

  • از دستور cmd:

    • فهرست "سلنیوم" را ایجاد کنید
    • C: / Users {USERNAME} سلنیوم

    • دستورات:

      • cd C: / کاربران {USERNAME}
      • mkdir سلنیوم

    • فایرفاکس

      • اگر قبلاً نصب نشده اید ، مرورگر فایرفاکس را نصب کنید.
      • باید مسیر را برای راه اندازی Firefox از خط فرمان (cmd) تنظیم کنید.

      • کنترل پنل-> سیستم و امنیت-> سیستم

        • تنظیمات پیشرفته سیستم
        • تنظیمات محیط
        • افزودن (ضمیمه استفاده از نیمه روده بزرگ) به متغیر مسیر
        • C: / Program Files (x86) Mozilla Firefox
      • برای فایرفاکس نیازی به درایور وب خاصی نیست.

    • Chrome

      • مرورگر کروم را نصب کنید ، اگر قبلاً نصب نشده است.
      • ممکن است مسیری تنظیم شود که Chrome از خط فرمان (cmd) شروع به کار کند.
      • ابتدا آزمایش کنید: chrome.exe از خط فرمان (cmd)
      • اگر کروم شروع به کار نکرد:

      • کنترل پنل-> سیستم و امنیت-> سیستم

        • تنظیمات پیشرفته سیستم
        • تنظیمات محیط
        • افزودن (افزودن استفاده از نیمه روده بزرگ) به متغیر مسیر
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • درایور وب مخصوص Chrome مورد نیاز است.

        به chromium.org بروید و درایور 32 بیتی را در فهرست "سلنیوم" از حالت فشرده خارج کنید

    • Internet Explorer (فقط برای ویندوز - در سایر سیستم عامل ها کار نمی کند)

      • درایور وب مخصوص IE مورد نیاز است.

        • به https://www.seleniumhq.org/download/ بروید
        • درایور 64 بیتی را در پوشه "selenium" بارگیری و از حالت فشرده خارج کنید.

مرحله 2: اسکریپت تست اولیه

بیایید با برخی اصول اولیه شروع کنیم.

در اینجا یک اسکریپت ساده موکا وجود دارد که یک وب سایت را باز می کند و عنوان را تأیید می کند.

// tutorial1.js

// // این یک اسکریپت آزمایشی ساده برای باز کردن یک وب سایت و // اعتبار عنوان است. // کتابخانه های مورد نیاز var webdriverio = نیاز ('webdriverio') ، باید = نیاز ('باید') ؛ // یک بلوک یا مجموعه اسکریپت تست ("عنوان عنوان برای درایور وب IO - وب سایت صفحه آموزش آموزشی" ، تابع () {// timeout را 10 ثانیه this.timeout (10000) ؛ var driver = {}؛ // تنظیم کنید) قلاب برای اجرا قبل از آزمایشات قبل (عملکرد (انجام شده) {// بارگیری درایور برای راننده مرورگر = webdriverio.remote ({wishCapability: {browserName: 'firefox'}})؛ driver.init (انجام شد)}}) // یک ویژگی تست - "مشخصات" آن ("باید صفحه و عنوان صحیح بارگذاری شود" ، تابع () {// بارگذاری صفحه ، سپس فراخوانی عملکرد () درایور.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // عنوان دریافت کنید ، سپس عنوان را به تابع ().getTitle () منتقل کنید. سپس (عملکرد (عنوان) {// عنوان (عنوان) را تأیید کنید. should.be.equal ("Web Driver IO - Tutorial Test Test Page ")؛ // اظهار نظر برای اشکال زدایی کنسول // console.log ('عنوان صفحه فعلی:' + عنوان) ؛})؛})؛ //" قلاب "برای اجرا پس از انجام تمام آزمایشات این بلوک پس از (عملکرد (انجام شد) {driver.end (done)؛})؛})؛

مشاهدات:

• ابتدا باید توجه داشته باشید که اسکریپت تست با JAVASCRIPT نوشته شده است (به پسوند.js ختم می شود).

• ساختار اصلی تقریباً برای همه اسکریپت های تست یکسان است.

  • سرفصل نظرات (//)
  • کتابخانه های مورد نیاز
  • تنظیم گزینه ها (اختیاری)
  • قلاب: بارگیری درایور مرورگر
  • مجموعه تست (توصیف)
  • مشخصات تست (می تواند مشخصات زیادی در یک مجموعه باشد)
  • هوک: تمیز کنید

• مجموعه آزمایشی با یک تابع توصیف شروع می شود که دو پارامتر دارد:

  • رشته - شرح مجموعه آزمون

    • "بررسی صحت کلمات مناسب"
    • "تأیید عملکرد دکمه های رادیویی"

  • تابع - بلوک کد برای اجرا

    توصیف ("شرح مجموعه تست" ، عملکرد () {}) ؛

• مجموعه آزمایشی شامل 1 یا بیشتر مشخصات تست (مشخصات) خواهد بود

• مشخصات با عملکرد آن شروع می شود که دو پارامتر دارد:

  • رشته - شرح مشخصات آزمایش

    • "باید متن پیوند و آدرس پیوند صحیح باشد"
    • "باید دارای کلمه صحیح (عرشه کپی) باشد
  • تابع - بلوک کد برای اجرا
  • it ('شرح مشخصات تست' ، عملکرد () {}) ؛
• یک مشخصات شامل یک یا چند انتظار است که وضعیت کد را آزمایش می کند

• به این موارد ادعا گفته می شود

  کتابخانه "باید" این ادعاها را ارائه می دهد

• تقریباً در همه موارد ، باید یک یا چند عنصر را با استفاده از یک انتخابگر پیدا کنید و سپس روی عناصر (عناصر) عملیات انجام دهید.

  • مثال ها:

    • متن را در یک صفحه بیابید و متن را تأیید کنید
    • یک فرم پر کنید و ارسال کنید
    • CSS یک عنصر را تأیید کنید

بیایید مثال را با نظرات دقیق تر بررسی کنیم

بارگیری کتابخانه های مورد نیاز: درایور وب IO و باید.

// کتابخانه های مورد نیاز

var webdriverio = نیاز ('webdriverio') ، باید = نیاز ('باید')؛

مجموعه آزمون را تعریف کنید. این مجموعه به نام: "عنوان عنوان برای درایور وب IO - وب سایت صفحه تست آموزشی"

// یک بلوک یا مجموعه اسکریپت تست

توصیف ('عنوان عنوان برای درایور وب IO - وب سایت صفحه تست آموزشی' ، عملکرد () {…}) ؛

زمان وقفه را روی 10 ثانیه تنظیم کنید تا هنگام بارگیری صفحه اسکریپت زمان آن تمام نشود.

// زمان وقفه را روی 10 ثانیه تنظیم کنید

this.timeout (10000) ؛

قبل از اجرای مشخصات "مشخصات" ، درایور مرورگر را بارگیری کنید. در این مثال درایور فایرفاکس بارگیری شده است.

// قلاب برای اجرا قبل از آزمایش

قبل (عملکرد (انجام شده) {// بارگیری درایور برای درایور مرورگر = webdriverio.remote ({wishCapability: {browserName: 'firefox'}}})؛ driver.init (انجام شد)؛})؛

مشخصات آزمون را مشخص کنید.

// مشخصات تست - "مشخصات"

it ('باید صفحه و عنوان صحیح بارگذاری شود' ، عملکرد () {…}) ؛

صفحه وب سایت را بارگذاری کنید

.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html')

عنوان را دریافت کنید ، سپس عنوان را به عملکرد منتقل کنید ()

.getTitle (). سپس (تابع (عنوان) {

… });

عنوان را با استفاده از کتابخانه must assertion تأیید کنید.

(عنوان).should.be.equal ("Web Driver IO - Tutorial Test Page") ؛

قلاب را ترک کرده و در پایان کار راننده را پاکسازی کنید.

// یک "قلاب" برای اجرا پس از تمام آزمایشات در این بلوک

after (function (done) {driver.end (done)؛})؛

مرحله 3: تست اسکریپت را اجرا کنید

حالا بیایید ببینیم اسکریپت آزمایشی وقتی اجرا می شود چه می کند.

ابتدا سرور مستقل سلنیوم را راه اندازی کنید:

• برای Windows از خط فرمان (cmd) استفاده کنید:

  • جاوا -جار
  • # java -jar selenium-server-standalone-2.46.0.jar

• برای مک یا لینوکس ، ترمینال را باز کنید:

  • جاوا -جار
  • $ java -jar selenium-server-standalone-2.46.0.jar
• به تصویر بالا مراجعه کنید

سپس اسکریپت تست را اجرا کنید:

• برای Windows از خط فرمان (cmd) استفاده کنید:

  • موکا
  • # موکا tutorial1.js

• برای مک یا لینوکس ، ترمینال را باز کنید:

  • موکا
  • $ mocha tutorial.js
• به تصویر بالا مراجعه کنید

پس چه اتفاقی افتاده؟

موکا از اسکریپت "tutorial1.js" استفاده می کند. درایور مرورگر (Firefox) را راه اندازی کرد ، صفحه را بارگذاری کرد و عنوان را تأیید کرد.

مرحله 4: نمونه وب سایت

همه مثالها در برابر این سایت اجرا می شوند.

وب سایت نمونه در این قسمت قرار دارد: Web Test IO Tutorial Test Page

همه اسکریپت های آزمایشی را می توان از github بارگیری کرد.

مرحله 5: نمونه های خاص

همه کد ها در github موجود است: Web Driver IO Tutorial on github

• پیوند و پیوند متن را در یک لیست نامرتب تأیید کنید - "linkTextURL1.js"

  • لیست نامرتب دارای یک است و پیوند چهارمین مورد لیست است.
  • نشانی اینترنتی باید "https://tlkeith.com/contact.html" باشد

// تأیید متن پیوند با ما تماس بگیرید

it ('should include Contact us text link'، function () {return driver.getText ("// ul [@id = 'mylist']/li [4]/a"). سپس (عملکرد (پیوند) {کنسول.log ('پیوند پیدا شد:' + پیوند) ؛ (پیوند).should.equal ("تماس با ما") ؛})؛})؛ // تأیید آدرس تماس با ما آدرس آن ('باید حاوی آدرس تماس با ما باشد' ، تابع () {return driver.getAttribute ("// ul [@id = 'mylist']/li [4]/a"، "href").then (تابع (پیوند) {(پیوند).should.equal ("https://tlkeith.com/contact.html")؛ console.log ('URL پیدا شد:' + پیوند)؛})؛})؛

• تأیید متن کپی رایت - "Copyright1.js"

  • کپی رایت در پاورقی است این مثال 2 روش مختلف برای قرار دادن متن کپی رایت را نشان می دهد:

    • به عنوان انتخاب کننده عنصر
    • با استفاده از xpath به عنوان انتخاب کننده عنصر

// تأیید متن کپی رایت با استفاده از شناسه به عنوان انتخاب کننده عنصر

آن ('باید حاوی متن حق نسخه برداری باشد' ، تابع () {راننده را برگردانید.getText ("#copyright"). سپس (تابع (پیوند) {console.log ("کپی رایت یافت شد:" + پیوند) ؛ (پیوند). باید. برابر ("تونی کیث - tlkeith.com @ 2015 - همه حقوق محفوظ است.")؛})؛})؛ // تأیید متن کپی رایت با استفاده از xpath به عنوان انتخاب کننده عنصر ('باید حاوی متن حق نسخه برداری باشد' ، تابع () {return driver.getText ("// footer/center/p"). سپس (عملکرد (پیوند) {console.log ('کپی رایت یافت شد:' + پیوند) ؛ (پیوند).should.equal ("Tony Keith - tlkeith.com @ 2015 - همه حقوق محفوظ است.")؛})؛})؛

• فیلدهای فرم را پر کرده و ارسال کنید - "formFillSubmit1.js"

  • نام ، نام خانوادگی را وارد کرده و ارسال کنید ، سپس منتظر نتایج باشید.

  • این مثال 3 روش برای پر کردن فیلد ورودی نام اول را نشان می دهد:

    • توسط شناسه
    • توسط xpath از ورودی
    • توسط xpath از form-> input
  • همچنین نحوه پاکسازی فیلد ورودی را نشان می دهد

// نام اول را با استفاده از id بر روی: Tony تنظیم کنید

it ('should set first name to Tony'، function () {return driver.setValue ("#fname"، "Tony").getValue ("#fname"). سپس (تابع (e) {(e).should.be.equal ("تونی") ؛ console.log ("نام:" + e)؛})؛})؛ // پاک کردن نام اول با استفاده از id it ('should first name'، function () {return driver.clearElement ("#fname").getValue ("#fname"). سپس (تابع (e) {(e).should.be.equal ("")؛ console.log ("نام:" + e)؛})}}}}؛ // نام اول را با استفاده از xpath از ورودی به: Tony it ('should set first name to Tony'، function () {return driver.setValue ("// input [@name = 'fname']"، "Tony") تنظیم کنید).getValue ("// input [@name = 'fname']"). سپس (تابع (e) {(e).should.be.equal ("Tony")؛ console.log ("First Name:" + ه) ؛}) ؛}) ؛ // پاک کردن نام اول با استفاده از xpath از ورودی آن ('باید نام اول را پاک کنید' ، تابع () {return driver.clearElement ("// ورودی [@name = 'fname']").getValue ("// ورودی [@name = 'fname'] "). سپس (تابع (e) {(e).should.be.equal (" ")؛ console.log (" First name: " + e)؛})}}}}؛ // نام اول را با استفاده از xpath از فرم به: Tony it ('should set first name to Tony'، function () {return driver.setValue ("// form [@id = 'search-form']/input [1] "،" Tony ").getValue (" // form [@id = 'search-form']/input [1] "). سپس (تابع (e) {(e).should.be.equal ("تونی") ؛ console.log ("نام:" + e)؛})؛})؛ // نام خانوادگی را با استفاده از id تنظیم کنید: Keith it ("باید نام خانوادگی را به Keith تنظیم کند" ، تابع () {return driver.setValue ("#lname"، "Keith").getValue ("#lname") سپس (تابع (e) {(e).should.be.equal ("Keith")؛ console.log ("نام خانوادگی:" + e)؛})؛})؛ // فرم را ارسال کنید و منتظر نتایج جستجو باشید ("باید فرم ارسال شود و منتظر نتایج باشید" ، تابع () {return driver.submitForm ("#search-form"). سپس (تابع (ه) {console.log (' ارسال فرم جستجو ')؛}).waitForVisible ("#search-results"، 10000).then (function (e) {console.log (' Search results found ')؛})؛})؛

• روی نمایش/مخفی کردن دکمه و تأیید متن کلیک کنید - "showHideVerify1.js"

  • متن در یک عنصر نمایش/پنهان قرار دارد. دکمه حالت را کنترل می کند.

  • این مثال نشان می دهد:

    • برای بزرگ شدن روی دکمه کلیک کنید
    • منتظر بمانید تا عنصر قابل مشاهده باشد (گسترش یافته)
    • تأیید متن (عرشه کپی)

// روی دکمه "More Info" کلیک کنید و متن را در عنصر گسترش یافته تأیید کنید

it ('باید روی دکمه اطلاعات بیشتر کلیک کنید و متن را تأیید کنید' ، تابع () {return driver.click ("#moreinfo"). then (function () {console.log ("دکمه اطلاعات بیشتر کلیک شد") ؛}).waitForVisible ("#collapseExample" ، 5000).getText ("// div [@id = 'CollaExample']/div"). سپس (تابع (e) {console.log ('Text:' + e) ؛ (e).should.be.equal ("همه چیز خوب اینجا برو!")؛})؛})؛

• اعتبار خطاهای فیلد فرم - "formFieldValidation.js"

  • از اسکریپت های آزمایشی برای بررسی صحت تولید پیام های خطا استفاده کنید.

  • این مثال نشان می دهد:

    پیام های متنی خطا را تأیید کرده و مکان (موقعیت لیست نامرتب) را تأیید کنید

it ('باید شامل 5 خطا باشد: first/last/address/city/state'، function () {

return driver.getText ("// ul [@class = 'alert alert-rrezik']/li [1]"). سپس (تابع (e) {console.log ('Error found:' + e)؛ (e).should.be.equal ("لطفاً نام اصلی را وارد کنید") ؛}).getText ("// ul [@class = 'alert alert-risk']/li [2]"). سپس (عملکرد (ه) {console.log ('Error found:' + e)؛ (e).should.be.equal ('لطفا نام خانوادگی را وارد کنید')؛}).getText ("// ul [@class = 'alert alert-risk ']/li [3] "). سپس (تابع (e) {console.log (' Error found: ' + e)؛ (e).should.be.equal (' لطفا آدرس را وارد کنید ')؛}). getText ("// ul [@class = 'alert alert-risk']/li [4]"). سپس (تابع (e) {console.log ('Error found:' + e)؛ (e).should.be.equal ('لطفاً شهر را وارد کنید') ؛}).getText ("// ul [@class = 'alert alert-risk']/li [5]"). سپس (تابع (e) {console.log ('خطا پیدا شد:' + e)؛ (e).should.be.equal ('لطفا حالت را وارد کنید')؛})؛ })؛

• Looping Data for Valid URL URL/Text/Page - "LoopDataExample1.js"

  • این مثال نشان می دهد: از یک آرایه از داده های JSON برای ذخیره پیوند و نام استفاده کنید ، سپس تکرار کنید

    • هر متن و پیوند URL را تأیید کنید
    • روی پیوند و بارگذاری صفحه کلیک کنید

// پیوند داده - پیوند و متن

var linkArray = [{"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/tutorial1.js"، "name": "tutorial1.js"}، {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/linkTextURL1.js "،" name ":" linkTextURL1.js "}، {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/ master/copyright1.js "،" name ":" copyright1.js "}، {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js "،" name ":" formFillSubmit1.js "}، {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js "،" name ":" showHideVerify1.js "}، {" پیوند ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dynamicBrowser.js "،" name ":" dynamBrowser.js "}، {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/ blob/master/callbackPromise.js "،" name ":" callbackPromise.js "}، {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js "،" name ": "debu gExample1.js "}، {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js "،" name ":" formFieldValidation.js "}، {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js "،" name ":" commonLib.js "}، {" link ":" https://github.com/onewithhammer/ WebDriverIOTutorial/blob/master/dataLoopExample1.js "،" name ":" dataLoopExample1.js "}]؛ … // از طریق هر linkArray linkArray.forEach (تابع (d) {it ('باید حاوی متن/پیوند و سپس صفحه باشد -' + d.name ، function () {return driver // مطمئن شوید که در صفحه شروع هستید) حلقه کنید..url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). سپس (عملکرد (عنوان) {// تأیید عنوان (عنوان).should.be.equal ("Web Driver IO - صفحه آزمایشی آموزشی ")؛}) // آدرس.getAttribute ('a =' + d.name،" href ") را پیدا کنید. سپس (تابع (پیوند) {(پیوند).should.equal (d.link) ؛ console.log ('URL found:' + d.link)؛}) // به صفحه URL بروید و صحت آن را تأیید کنید. ((a = ' + d.name).waitForVisible ("#js-repo-pjax- container "، 10000).then (function () {console.log ('Github Page Found')؛})؛})؛})؛

• حلقه کردن داده های استاتیک برای پر کردن زمینه های فرم - "loopDataExample2.js"

  • این مثال نشان می دهد: برای ذخیره نام/نام خانوادگی از آرایه ای از داده های JSON استفاده کنید

    • داده ها را پر کنید تا فیلدهای فرم پر شوند ، سپس فرم را ارسال کنید
    • منتظر صفحه نتایج باشید
    • نام / نام خانوادگی را در صفحه نتایج تأیید کنید

// آرایه داده - firstName و lastNamevar dataArray = [{"firstName": "Tony"، "lastName": "Keith"}، {"firstName": "John"، "lastName": "Doe"}، {"firstName ":" Jane "،" lastName ":" Doe "} ، {" firstName ":" Don "،" lastName ":" Johnson "}]؛ … // از طریق هر dataArray dataArray.forEach (تابع (d) {it ('باید فیلدها را پر کنید ، صفحه sumbit' ، تابع () {return driver // مطمئن شوید که در صفحه شروع هستید.url ('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). سپس (تابع (عنوان) {// تأیید عنوان (عنوان).should.be.equal ("Web Driver IO - Tutorial Test Test")؛}).setValue ("#fname"، d.firstName).getValue ("#fname"). سپس (تابع (e) {(e).should.be.equal (d.firstName)؛ console.log ("اول نام: " + e)؛}).setValue ("#lname "، d.lastName).getValue ("#lname "). سپس (تابع (e) {(e).should.be.equal (d.lastName)؛ console.log ("نام خانوادگی:" + e)؛}).submitForm ("#فرم جستجو"). سپس (function () {console.log ('ارسال فرم جستجو')؛}).waitForVisible ("#search-results"، 10000).then (function () {console.log ('Page Result Found')؛}).getText ("// h1"). سپس (تابع (پیوند) {console.log ('متن پیدا شد:' + پیوند) ؛ (پیوند).should.equal ("خوش آمدید" + d.firstName + "" + d.lastName + ".")؛})؛})؛})؛

• اعتبارسنجی ویژگی های CSS - "cssValidation1.js"

  • این مثال نشان می دهد که چگونه:

    • خصوصیات CSS زیر را تأیید کنید:

      • رنگ
      • بالشتک (بالا ، پایین ، راست ، چپ)
      • رنگ پس زمینه

it ('باید حاوی رنگ صحیح متن خطا باشد' ، عملکرد () {return driver.getCssProperty ("// ul [@class = 'alert alert-risk']/li [1]" ، "color"). سپس (function (result) {console.log ("رنگ پیدا شد:" + result.parsed.hex + "یا" + result.value) ؛ (result.parsed.hex).should.be.equal ('#a94442') ؛ })؛})؛

it ('باید حاوی پد صحیح در سلول جدول باشد' ، تابع () {

return driver // padding: بالا سمت راست پایین سمت چپ.getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]" ، "padding-top"). سپس (عملکرد (result) {console.log ('padding-top found:' + result.value)؛ (result.value).should.be.equal ('10px')؛}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1] "،" padding-bottom "). سپس (تابع (نتیجه) {console.log ('padding-bottom found:' + result.value) ؛ (result.value).should.be.equal ('10px')؛}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]"، "padding- right "). then (function (result) {console.log ('padding-right found:' + result.value)؛ (result.value).should.be.equal ('5px')؛}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]" ، "padding-left"). سپس (تابع (نتیجه) {console.log ('padding-left found: ' + result.value]؛ (result.value).should.be.equal (' 5px ')؛})؛ })؛

it ('باید رنگ پس زمینه صحیح در سرصفحه جدول داشته باشد' ، تابع () {

return driver.getCssProperty ("// table [@id = 'filelist']/thead"، "background-color"). سپس (تابع (نتیجه) {console.log ('رنگ پس زمینه پیدا شد:' + result.parsed hex)؛ (result.parsed.hex).should.be.equal ('#eeeeee')؛})؛ })؛

مرحله ششم: نکات و ترفندها

• اشکال زدایی:

  • برای اشکال زدایی بیشتر و ایجاد گزارش ها ، ورود به سیستم در سطح راننده را روشن کنید.

    • تنظیم logLevel روی 'verbose'
    • تنظیم logOutput به نام فهرست ('logs')

driver = webdriverio.remote (loglevel: 'verbose'، logOutput: 'logs'، {სასურველიCapability: {browserName: 'firefox'}})؛

• برای اشکال زدایی از console.log () ، اشکال زدایی () ، getText () استفاده کنید.

  • console.log () - برای نمایش اطلاعات برای تعیین وضعیت استفاده کنید.
  • اشکال زدایی () - از مکث مرورگر/اسکریپت استفاده کنید تا enter در خط فرمان فشرده شود.

  • getText () - برای تأیید تعامل با عنصر صحیح استفاده کنید.

    مخصوصاً با عبارات xpath مفید است

// بر روی مورد 3 از لیست کلیک کنید

it ('باید روی مورد 3 از لیست کلیک کنید' ، تابع () {// از getText () برای تأیید صحت xpath برای عنصر بازگشت راننده.getText ("// ul [@id = 'mylist']/li استفاده کنید) [3]/div/div/a "). سپس (تابع (پیوند) {// از console.log () برای خروجی اطلاعات console.log ('پیوند پیدا شد:' + پیوند) ؛ (پیوند).should.equal استفاده کنید ("مورد 3") ؛}) // از اشکال زدایی () برای توقف عمل برای مشاهده آنچه در مرورگر اتفاق می افتد استفاده کنید.debug ().click ("// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('لینک کلیک شد')؛}) // منتظر ظاهر شدن فرم جستجوی Google باشید.waitForVisible ("#tsf"، 20000).سپس (تابع (ه) {console.log ('Search results found')؛})؛})؛

• برای تغییر پویا مرورگر از متغیر محیط استفاده کنید:

  • از متغیر محیطی SELENIUM_BROWSER برای فراخوانی یک مرورگر دیگر بدون تغییر هر بار اسکریپت تست استفاده کنید.
  • برای پشتیبانی نیاز به کمی تغییر کد دارد.

تغییرات کد:

// بارگیری درایور مرورگر

driver = webdriverio.remote ({wishCapilities: {browserName: process.env. SELENIUM_BROWSER || 'chrome'}})؛

مرورگرهای پشتیبانی شده:

• Internet Explorer - IE 8+ (فقط Windows)

  SELENIUM_BROWSER = یعنی موکا

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER = موکا فایرفاکس

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER = موکا کروم

• اپرا 12+

  SELENIUM_BROWSER = موکا اپرا

• سافاری

  SELENIUM_BROWSER = سافاری موکا

آزمایش کردن:

• در ویندوز از git bash shell استفاده کنید:

  • SELENIUM_BROWSER = موکا کروم
  • $ SELENIUM_BROWSER = کروم موکا DynamicBrowser.js

• برای مک یا لینوکس ، ترمینال را باز کنید:

  • SELENIUM_BROWSER = موکا کروم
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• آزمایش پاسخگو:

  • نقاط شکست را بر اساس پروژه یا چارچوب (یعنی بوت استرپ) تعیین کنید.

  • تعریف متغیرهای محیطی برای هر نقطه شکست:

    • رومیزی - 1200 پیکسل
    • جدول - 992 پیکسل
    • موبایل - 768 پیکسل

  • یک فرمان قابل استفاده مجدد برای خواندن متغیر محیط و تنظیم اندازه مرورگر ایجاد کنید.

    مثال زیر را ببینید

  • دستور اسکریپت آزمایشی خود را با قابلیت استفاده مجدد فراخوانی کنید.

// کد قابل استفاده مجدد - کتابخانه // قطعه کد if (bp == "DESKTOP") {obj.width = 1200؛ obj.height = 600 ؛ obj.name = bp؛ } else if (bp == "TABLET") {obj.width = 992؛ obj.height = 600 ؛ obj.name = bp؛ } else if (bp == "MOBILE") {obj.width = 768؛ obj.height = 400 ؛ obj.name = bp؛ }

// اسکریپت تست

before (function (done) {winsize = common.getWindowSizeParams ()؛… driver.addCommand ('setWindowSize'، common.setWindowSize.bind (درایور))؛} // اندازه پنجره را تنظیم کنید ('باید اندازه پنجره را تنظیم کند' ، تابع (انجام شد) {// فقط عرض مهم است driver.setWindowSize (winsize.width، winsize.height، function () {}). فراخوانی (انجام شده) ؛})؛

• دستورات قابل استفاده مجدد (دستورات سفارشی):

  • Web Driver IO به راحتی قابل گسترش است.
  • من دوست دارم همه دستورات قابل استفاده مجدد را در یک کتابخانه قرار دهم. (شاید این مدرسه قدیمی باشد اما کار می کند!)

common/commonLib.js

// verifyLastNameCheckError ()

// // شرح: // پیام خطای تأیید فرم نام خانوادگی را تأیید می کند // // ورودی: // شماره - فهرست خطا (1-5) // خروجی: // هیچ // var verifyLastNameCheckError = function () { var idx = استدلالها [0] ، فراخوانی = استدلالها [arguments.length - 1] ؛ this.getText ("// ul [@class = 'alert alert-rrezik']/li [" + idx + "]" ، عملکرد (خطا ، ه) {console.log ('خطا پیدا شد:' + e) ؛ (ه).should.be.equal ('لطفا نام خانوادگی را وارد کنید')؛}). تماس بگیرید (تماس تلفنی) ؛ }؛ // خروجی تابع module.exports.verifyLastNameCheckError = verifyLastNameCheckError ؛

در اینجا تغییرات خاصی مورد نیاز برای فراخوانی یک تابع قابل استفاده مجدد آمده است

برای مشاهده نمونه کار کامل به formFieldValidation.js مراجعه کنید

// نیاز به دستور قابل استفاده مجدد - CommonLib

common = require ('./ Common/CommonLib')؛ … // دستورات را متصل کنید driver.addCommand ('verifyFirstNameError'، common.verifyFirstNameCheckError.bind (درایور))؛ driver.addCommand ('verifyLastNameError'، common.verifyLastNameCheckError.bind (درایور))؛ it ('باید شامل 2 خطا باشد: نام/نام خانوادگی' ، تابع () {// فراخوانی درایور تابع قابل استفاده مجدد.verifyFirstNameError (1)؛.verifyLastNameError (2)؛})؛

• فایل پروژه/ساختار دایرکتوری:

  • در اینجا ساختار پروژه معمولی است:

    • "پروژه" - فهرست اصلی پروژه

      • README.md - readme برای پروژه جهانی

      • "Common" - فهرست عملکردهای جهانی مشترک در همه پروژه ها

        • common -lib.js - کتابخانه تابع جهانی
        • README.md - readme برای توابع جهانی

      • "Product1" - فهرست محصول 1

        • test-script1.js
        • test-script2.js

        • "Common" - فهرست عملکردهای محلی پروژه 1

          • prod1 -lib.js - کتابخانه عملکرد محلی برای پروژه 1
          • README.md - readme برای عملکردهای محلی پروژه 1

      • "Product2"-فهرست محصول 2test-script1.jstest-script2.js

        • "Common" - فهرست عملکردهای محلی پروژه 2

          • prod2 -lib.js - کتابخانه عملکرد محلی برای پروژه 2
          • README.md - readme برای عملکردهای محلی پروژه 2

• اسکریپت های تست را به چندین فایل تقسیم کنید:

  • در اینجا نمونه ای از استفاده از چندین فایل وجود دارد:

    • سلامت عقل - اسکریپت تست اولیه برای بررسی همه چیز در حال کار است
    • تأیید عنصر استاتیک و متن - همه عناصر و متن را تأیید کنید
    • تأیید خطای فرم/صفحه - تأیید خطا
    • نتایج جستجو - محتوای پویا را آزمایش کنید

• تماس در مقابل وعده ها:

  • نسخه 3 Web Driver IO هم از تماس های تلفنی و هم از وعده ها پشتیبانی می کند.

    وعده ها روش ترجیحی هستند زیرا کد مدیریت خطا را کاهش می دهد. لطفاً در زیر همان نمونه ای را که با استفاده از تماس های تلفنی و وعده ها نوشته شده است ، مشاهده کنید.

تماس های تلفنی

// نام/نام خانوادگی را با استفاده از Callback تنظیم/تأیید کنید

it ("باید نام/نام خانوادگی را با استفاده از Callbacks تنظیم/تأیید کند" ، عملکرد (انجام شده) {driver.setValue ("#fname"، "Tony"، function (e) {driver.getValue ("#fname"، function (err ، e) {(e).should.be.equal ("Tony")؛ console.log ("First Name:" + e)؛ driver.setValue ("#lname"، "Keith"، function (e) { driver.getValue ("#lname" ، function (err، e) {(e).should.be.equal ("Keith")؛ console.log ("نام خانوادگی:" + e) ؛ انجام شده ()؛}}) ؛})؛})؛})؛})؛

وعده ها

// نام/نام خانوادگی را با استفاده از قول ها تنظیم/تأیید کنید

it ('should set/verify the first/last name with using Promises'، function () {return driver.setValue ("#fname"، "Tony").getValue ("#fname"). سپس (تابع (e) {(ه).should.be.equal ("تونی") ؛ console.log ("نام:" + e) ؛}).setValue ("#lname" ، "Keith").getValue ("#lname"). سپس (تابع (e) {(e).should.be.equal ("Keith")؛ console.log ("نام خانوادگی:" + e)؛})؛})؛

مرحله 7: منابع بیشتر

در اینجا چند منبع اضافی برای مرجع شما آمده است:

• گروه های بحث (Gitter)

  • گروه بحث راننده وب IO
  • گروه بحث موکا

• پروژه های جالب دیگر

  • Supertest - ادعاهای
  • چای - ادعاها

مرحله 8: نتیجه گیری

مدتی را صرف تحقیق در مورد فناوری هایی کردم که برای پروژه من استفاده می شود. من در ابتدا با Selenium Web Driver شروع کردم اما به استفاده از Web Driver IO روی آوردم. به نظر می رسد استفاده از درایور وب IO آسان تر و گسترش آن بسیار آسان تر است (حداقل مستندات مربوط به تمدید - دستورات قابل استفاده مجدد بهتر بود).

هنگامی که من برای اولین بار شروع به بررسی فناوری ها کردم ، پیدا کردن مثال های خوب که نسبت به کاری که من سعی می کردم انجام دهم دشوار بود. به همین دلیل من می خواستم این اطلاعات و دانش را با شما به اشتراک بگذارم.

این فناوریها بسیار بهتر از آنچه انتظار داشتم کار کردند ، هرچند که منحنی یادگیری نیز در آن دخیل بود. وقتی فهمیدم چگونه همه اجزا با هم کار می کنند ، در مدت زمان بسیار کوتاهی توانستم اسکریپت های آزمایشی پیچیده ای بنویسم. سخت ترین اسکریپت ها اجزای مبتنی بر جاوا اسکریپت مانند انتخاب تاریخ و انتخاب کننده های مودال بودند.

من هرگز خود را بعنوان توسعه دهنده جاوا اسکریپت برچسب گذاری نکرده ام و نمی خواستم متخصص JavaScript باشم ، اما استفاده از این فناوری ها قطعاً انگیزه ای برای تقویت مهارت های JS من ایجاد کرده است.

امیدوارم این مقاله مفید باشد و مثالها واضح و آموزنده باشد.

لطفا در صورت داشتن هرگونه سوال یا نظری به من اطلاع دهید.

متشکرم،

تونی کیت