cypress example kitchensink
v3.1.2
هذا تطبيق مثال يستخدم لعرض اختبار Cypress.io من طرف إلى طرف (E2E). يوضح التطبيق استخدام معظم أوامر API Cypress. بالإضافة إلى ذلك ، تم تكوين تطبيق المثال لتشغيل اختبارات E2E في منصات CI المختلفة. توضح العديد من مهام سير العمل استخدام CI لصور Cypress Docker التي توفر بيئات متوافقة مريحة ومتوافقة مسبقًا لـ Cypress. يتم التعليق بشكل كبير على الاختبارات.
لمشاهدة تطبيق Sink Kitchen ، وعرض أوامر API Cypress التي يظهرها التطبيق ، تفضل بزيارة example.cypress.io.
للحصول على مرجع كامل لوثائقنا ، انتقل إلى docs.cypress.io.
للحصول على مثال على تطبيق الدفع ، يوضح الاستخدام الحقيقي في اختبار Cypress.io من طرف إلى طرف (E2E) ، انتقل إلى مستودع Cypress-IO/Cypress-RealWorld-App.
يسرد الجدول التالي سير العمل المباشر من مختلف مقدمي خدمات CI. كل هذه تختبر بشكل مستقل محتويات مستودع هذا المثال. يقومون بتشغيل وتسجيل باستخدام Cypress Cloud مع عرض نتائجها مركزيًا تحت Cypress Cloud ProjectId 4b7344 . يعرض كل مزود CI حالة البناء الخاصة به على موقعه الخاص:
| CI مزود | سير العمل | بناء الحالة | مثال Docker |
|---|---|---|---|
| Appveyor | appveyor.yml | ||
| circleci | .circleci/config.yml | ✅ | |
| Cypress-IO/Github-action | باستخدام التحرك | ||
| أفعال جيثب | واحد | ||
| أفعال جيثب | موازي |
يمكنك العثور على جميع نتائج CI المسجلة على Cypress Cloud
يوضح هذا الجدول أمثلة إضافية على سير عمل CI. باستثناء تدفقات عمل إجراءات GitHub ، فهذه ليست أمثلة حية كما في الجدول أعلاه وقد تتطلب تعديلًا قبل الاستخدام. تعمل سير عمل إجراءات GitHub على الهواء مباشرة وتستمر دون تسجيل إلى Cypress Cloud.
| CI مزود | التكوين الأساسي | تهيئة متوازية كاملة | مثال Docker |
|---|---|---|---|
| AWS تضخيم | Amplify.yml | ||
| AWS Codebuild | Basic/BuildSpec.yml | buildspec.yml | |
| خطوط الأنابيب Azure | Basic/Azure-ci.yml | Azure-ci.yml | |
| Buddy.Works | الأصدقاء | ✅ | |
| BuildKite | .buildkite/pipeline.yml | ||
| circleci | Basic/.circleci/config.yml | ✅ | |
| CloudBees CodeShip Pro | الأساسي/codeship-pro | codeship-services.yml | ✅ |
| أفعال جيثب | chrome.yml | ||
| أفعال جيثب | Chrome-Docker.yml | ✅ | |
| جيتلاب | BASIC/.GITLAB-CI.YML | .gitlab-ci.yml | ✅ |
| جنكينز | Basic/Jenkinsfile | جنكينسفيل | ✅ |
| Semaphore 2.0 | Basic/.semaphore.yml | .semaphore/semaphore.yml | |
| ترافيس سي | Basic/.travis.yml | .travis.yml |
توفر أمثلة مزود Cypress Page CI بعض الأمثلة مع أدلة واسعة لاستخدام Cypress مع بعض مقدمي CI الأكثر شعبية.
لتشغيل الاختبارات من هذا الريبو على الجهاز المحلي الخاص بك ، تأكد أولاً من تلبية جهازك مع متطلبات نظام Cypress ، بما في ذلك تثبيت Node.js وفقًا للإصدار المحدد في الملف .Node-Version.
إن تنفيذ التعليمات التالية سوف يستنسخ المستودع وتثبيت التبعيات وتشغيل السرو:
git clone https://github.com/cypress-io/cypress-example-kitchensink.git
cd cypress-example-kitchensink
npm ci # install dependencies
npm run local:run # run Cypress headlessly local:run هو برنامج نصي. json يبدأ خادم ويب محلي ثم يستخدم Cypress Run لتشغيل Cypress بلا رأس. إذا كنت ترغب في تشغيل اختبارات Cypress بشكل تفاعلي ، فقم بتشغيل الأمر التالي الذي يستخدم Cypress Open لتشغيل Cypress في وضع الرأس. يمكنك اختيار الاختبارات الفردية لتشغيل.
npm run local:open كبديل لاستخدام local:open and local:run Scripts ، يمكنك أيضًا بدء تشغيل الخادم في خطوة واحدة ثم تشغيل Cypress في خطوة ثانية.
npm start # start server on port 8080 يمكنك التحقق من أن الخادم قيد التشغيل إذا فتحت متصفح ويب وانتقل إلى http://localhost:8080 .
ثم في نافذة طرفية منفصلة تنفيذ أيضًا
npx cypress run # for headless modeأو
npx cypress open # for headed interactive mode البرامج النصية local:run and local:open استخدم الاسم start-test البدء لوحدة NPM Server-and-Test لتشغيل. يطلق Cypress.
يولد برنامج start STRIPT خادمًا على شبكة الإنترنت باستخدام وحدة NPM التي تخدمها وتعرض تطبيق Sink Kitchen على المنفذ 8080 .
إذا قمت بتثبيت Docker محليًا ، على سبيل المثال باستخدام سطح Docker Desktop ، يمكنك إجراء اختبارات من هذا الريبو بشكل تفاعلي في حاوية Docker. استخدم صور Cypress Docker ، والتي تم تصميمها مع جميع المتطلبات المسبقة لتشغيل Cypress. وهي متوفرة كقاعدة ومتصفحات وخيارات متضمنة من Docker Hub ومعرض Amazon ECR (سجل الحاوية المرن).
على النحو الوارد أعلاه ، ابدأ عن طريق استنساخ الريبو وتثبيت التبعيات:
git clone https://github.com/cypress-io/cypress-example-kitchensink
cd cypress-example-kitchensink
npm ciملحوظة
من أجل البساطة ، تستخدم أمثلة Docker أدناه مرجع مستودع مثل cypress/base مع latest علامة الإصدار. لتحديد إصدار سابق ، استبدل latest بعلامة صريحة ، على سبيل المثال cypress/base:20.15.1 . ينصح علامات الإصدار الصريح للإنتاج. يتم شرح الاستخدام في اختيار العلامة.
يستخدم المثال التالي صورة Cypress/Base التي لا تحتوي على متصفحات. سوف تستخدم متصفح الإلكترون المجمع مع السرو بدلاً من ذلك. لتشغيل حاوية Docker ، قم بتنفيذ ما يلي:
docker run -it --rm -v .:/e2e -w /e2e cypress/base:latestعندما تظهر موجه الحاوية ، أدخل:
npx cypress install # install Cypress binary
npm run test:ci # start server and run tests in Electron browser
exit مع صورة Cypress/Browsers ، لديك خيار إضافي لمتصفحات Chrome و Edge و Firefox. تنفيذ ما يلي:
docker run -it --rm -v .:/e2e -w /e2e cypress/browsers:latestعندما تظهر موجه الحاوية ، أدخل:
npx cypress install # install Cypress binary
npm run test:ci # start server and run tests in Electron browser
npm run test:ci:chrome # start server and run tests in Chrome browser
npm run test:ci:edge # start server and run tests in Edge browser
npm run test:ci:firefox # start server and run tests in Firefox browser
exit تضيف الصور Cypress/المضمنة تثبيت Cypress كامل مقارنةً بـ Cypress/Browsers. قم بتنفيذ ما يلي لتشغيل الحاوية باستخدام أمر خط واحد ، واختباره مع متصفح Chrome:
docker run -it --rm -v .:/e2e -w /e2e --entrypoint bash cypress/included:latest -c ' npm run test:ci:chrome ' # use for matching Cypress versions استبدل latest علامة في الأمر أعلاه باستخدام إصدار Cypress من حزمة repo. لاحظ أن الإصدارات غير المتطابقة ستسبب أخطاء.
ملحوظة
يتم تثبيت المتصفحات الإضافية Chrome و Edge و Firefox فقط في linux/amd64 Architecture Images cypress/browsers و cypress/included . المتصفحات غير متوفرة مثبتة مسبقًا لصور العمارة linux/arm64 . متصفح الإلكترون ، المدمج في السرو ، متاح في جميع الصور والبنية.
إذا كنت ترغب في تجربة إجراء اختبارات في مزود تكامل مستمر (CI) ، فأنت بحاجة إلى أن تتفوق أولاً على المستودع بحيث يكون لديك نسختك الخاصة. ارجع إلى وثائق GitHub لإعداد الأسماء المستعارة remote upstream (إلى هذا الريبو) remote origin (إلى شوكة الخاص بك) بشكل صحيح. ستحتاج أيضًا إلى الحصول على حساب مع مزود CI الذي تريد اختباره.
تحقق من المبدأ التوجيهي المساهمة.
انظر الإصدارات.
