Statut de construction:
Appium helper:
Web helper:
Référence: API des aides
CodeCeptJS est un nouveau cadre de test pour les tests de bout en bout avec WebDriver (ou autres). Il résume l'interaction du navigateur à des étapes simples qui sont écrites du point de vue d'un utilisateur. Un test simple qui vérifie que le texte "Bienvenue" est présent sur une page principale d'un site ressemblera:
Feature ( 'CodeceptJS demo' ) ;
Scenario ( 'check Welcome page on site' , ( { I } ) => {
I . amOnPage ( '/' ) ;
I . see ( 'Welcome' ) ;
} ) ;Les tests CodeCeptJ sont:
I . Cela rend le test facile à lire, à écrire et à maintenir même pour les personnes non techniques. CodeCeptJS utilise des modules d'assistance pour fournir des actions à l'objet I Actuellement, CodeceptJS a ces aides:
Et plus à venir ...
CodeCeptJs est un successeur de CodeCection, un cadre de test complet populaire pour PHP. Avec CodeCeptJs, vos tests fonctionnels et d'acceptation axés sur le scénario seront aussi simples et propres que possible. Vous n'avez pas à vous soucier de la nature asynchrone des nodejs ou de diverses API de dramaturge, de sélénium, de marionnettiste, de testcafe, etc. car les codecpts les unifie et les font fonctionner comme ils sont synchrones.
npm i codeceptjs --saveDéplacez-vous vers le répertoire où vous souhaitez que vos tests (et CodeCeptJs config) soient stockés et exécutez:
npx codeceptjs initPour créer et configurer un environnement de test. Il est recommandé de sélectionner WebDriver dans la liste des aides, si vous avez besoin d'écrire des tests de sélénium Webdriver.
Après cela, créez votre premier test en exécutant:
npx codeceptjs generate:testMaintenant le test est créé et peut être exécuté avec
npx codeceptjs runSi vous souhaitez rédiger vos tests à l'aide de TypeScript, générez simplement des définitions de type standard en exécutant:
npx codeceptjs def .Plus tard, vous pouvez même mettre à jour automatiquement les définitions de types pour inclure vos propres méthodes d'aide personnalisées.
Note:
12+ ou version ultérieure. Apprenez les codepts par exemples. Supposons que les codeCEPTJS sont installés et WebDriver Helper activés.
Voyons comment nous pouvons gérer les tests de formulaire de base:
Feature ( 'CodeceptJS Demonstration' ) ;
Scenario ( 'test some forms' , ( { I } ) => {
I . amOnPage ( 'http://simple-form-bootstrap.plataformatec.com.br/documentation' ) ;
I . fillField ( 'Email' , '[email protected]' ) ;
I . fillField ( 'Password' , secret ( '123456' ) ) ;
I . checkOption ( 'Active' ) ;
I . checkOption ( 'Male' ) ;
I . click ( 'Create User' ) ;
I . see ( 'User is valid' ) ;
I . dontSeeInCurrentUrl ( '/documentation' ) ;
} ) ; Toutes les actions sont effectuées par I objet; Les fonctions d'assertions commencent par la fonction see . Dans ces exemples, toutes les méthodes de I sont tirées de WebDriver Helper, voir référence pour apprendre à les utiliser.
Exécutons ce test avec la commande run . Option supplémentaire --steps nous montrera le processus en cours d'exécution. Nous recommandons d'utiliser --steps ou --debug pendant le développement.
npx codeceptjs run --stepsCela produira une sortie:
CodeceptJS Demonstration --
test some forms
• I am on page " http://simple-form-bootstrap.plataformatec.com.br/documentation "
• I fill field " Email " , " [email protected] "
• I fill field " Password " , " **** "
• I check option " Active "
• I check option " Male "
• I click " Create User "
• I see " User is valid "
• I dont see in current url " /documentation "
✓ OK in 17752ms CodeCeptJs a une fonctionnalité ultime pour vous aider à développer et à déboguer votre test. Vous pouvez interrompre l'exécution du test à n'importe quel endroit et utiliser le shell interactif pour essayer différentes actions et localisateurs. Ajoutez simplement pause() Appelez à n'importe quel endroit dans un test et exécutez-le.
Le shell interactif peut être démarré en dehors du contexte du test en fonctionnant:
npx codeceptjs shell Nous avons rempli le formulaire avec des méthodes fillField , qui situaient des éléments de formulaire par leur étiquette. De la même manière que vous pouvez localiser l'élément par nom, CSS ou XPath Locateurs dans les tests:
// by name
I . fillField ( 'user_basic[email]' , '[email protected]' ) ;
// by CSS
I . fillField ( '#user_basic_email' , '[email protected]' ) ;
// don't make us guess locator type, specify it
I . fillField ( { css : '#user_basic_email' } , '[email protected]' ) ; D'autres méthodes comme checkOption et click un fonctionnement de la même manière. Ils peuvent prendre des étiquettes ou des localisateurs CSS ou XPATH pour trouver des éléments pour interagir.
Les assertions commencent par préfixe see ou dontSee . Dans notre cas, nous affirmons que la chaîne «l'utilisateur est valide» se trouve quelque part dans une page Web. Cependant, nous pouvons réduire la recherche à un élément particulier en fournissant un deuxième paramètre:
I . see ( 'User is valid' ) ;
// better to specify context:
I . see ( 'User is valid' , '.alert-success' ) ; Dans ce cas, l'utilisateur «L'utilisateur est valide» sera recherché uniquement à l'intérieur des éléments situés par CSS .alert-success
Dans le cas où vous devez renvoyer une valeur à partir d'une page Web et l'utiliser directement dans le test, vous devez utiliser des méthodes avec un préfixe grab . On s'attend à ce qu'ils soient utilisés à l'intérieur des fonctions async/await , et leurs résultats seront disponibles dans le test:
Feature ( 'CodeceptJS Demonstration' ) ;
Scenario ( 'test page title' , async ( { I } ) => {
I . amOnPage ( 'http://simple-form-bootstrap.plataformatec.com.br/documentation' ) ;
const title = await I . grabTitle ( ) ;
I . expectEqual ( title , 'Example application with SimpleForm and Twitter Bootstrap' ) ; // Avaiable with Expect helper. -> https://codecept.io/helpers/Expect/
} ) ;De la même manière que vous pouvez saisir du texte, des attributs ou des valeurs de formulaire et les utiliser dans les étapes de test suivantes.
Des étapes de préparation courantes comme l'ouverture d'une page Web, la connexion à un utilisateur, peuvent être placées Before ou en Background :
const { I } = inject ( ) ;
Feature ( 'CodeceptJS Demonstration' ) ;
Before ( ( ) => { // or Background
I . amOnPage ( 'http://simple-form-bootstrap.plataformatec.com.br/documentation' ) ;
} ) ;
Scenario ( 'test some forms' , ( ) => {
I . click ( 'Create User' ) ;
I . see ( 'User is valid' ) ;
I . dontSeeInCurrentUrl ( '/documentation' ) ;
} ) ;
Scenario ( 'test title' , ( ) => {
I . seeInTitle ( 'Example application' ) ;
} ) ; CodeCeptJS fournit le moyen le plus simple de créer et d'utiliser des objets de page dans votre test. Vous pouvez en créer un en courant
npx codeceptjs generate pageobject Il créera un fichier d'objet page pour vous et l'ajoutera à la configuration. Supposons que nous en avons créé un nom nommé docsPage :
const { I } = inject ( ) ;
module . exports = {
fields : {
email : '#user_basic_email' ,
password : '#user_basic_password'
} ,
submitButton : { css : '#new_user_basic input[type=submit]' } ,
sendForm ( email , password ) {
I . fillField ( this . fields . email , email ) ;
I . fillField ( this . fields . password , password ) ;
I . click ( this . submitButton ) ;
}
}Vous pouvez facilement l'injecter pour tester en fournissant son nom dans les arguments de test:
Feature ( 'CodeceptJS Demonstration' ) ;
Before ( ( { I } ) => { // or Background
I . amOnPage ( 'http://simple-form-bootstrap.plataformatec.com.br/documentation' ) ;
} ) ;
Scenario ( 'test some forms' , ( { I , docsPage } ) => {
docsPage . sendForm ( '[email protected]' , '123456' ) ;
I . see ( 'User is valid' ) ;
I . dontSeeInCurrentUrl ( '/documentation' ) ;
} ) ; Lorsque vous utilisez TypeScript, remplacez module.exports par export pour la complétion automatique.
Daponde | kobenguyent | Vorobeyko | roubenmiller |
Arhell | Apshenkin | Fabioel | pablopaul |
Mirao | Georgegriff | Kmkoushik | nikocanvacom |
elukoyanov | Thomashohn | Gkushang | tsuemura |
Egorbodnar | Vikalpp | Elaichenkov | Borisosipov |
ngraf | nitschsb | hubidu | jploskonka |
maojunxyz | abhimanyupanien | martomo | Haufacci |
Équipe MIT © CodeCeptJs