समय के साथ, किसी भी उत्पाद में परिवर्तन करना अधिक कठिन हो जाता है, और न केवल नई सुविधाओं को जारी करने का जोखिम बढ़ रहा है, बल्कि पुराने को भी तोड़ना है। अक्सर, पूरे प्रोजेक्ट को मैन्युअल रूप से जांचने के बजाय, वे इस प्रक्रिया को स्वचालित करने का प्रयास करते हैं। यदि आप ऐसे लोगों के साथ बात करते हैं जो इंटरफेस का परीक्षण कर रहे हैं और सम्मेलनों के आसपास चलते हैं, तो यह स्पष्ट हो जाता है कि वेब परीक्षण सेलेनियम नियमों की दुनिया में, और विशाल बहुमत पेज ऑब्जेक्ट को कोड के संगठन के रूप में उपयोग करते हैं।

लेकिन मेरे लिए, एक प्रोग्रामर के रूप में, किसी कारण से मुझे यह पैटर्न और वह कोड पसंद नहीं आया जो मैंने अलग-अलग टीमों के साथ देखा था - जो अक्षर SOLID मेरे सिर में लगे थे। लेकिन मैं इस तथ्य के साथ आने के लिए तैयार था कि परीक्षकों को कोड लिखना पसंद है, क्योंकि विकल्प की कमी के कारण, लगभग एक साल पहले की तरह, कोणीय कनेक्ट पर, मैंने स्क्रीनप्ले पैटर्न का उपयोग करके कोणीय अनुप्रयोगों के परीक्षण पर एक रिपोर्ट सुनी। अब मैं साझा करना चाहता हूं।

प्रायोगिक खरगोश

सबसे पहले, प्रयुक्त उपकरणों का संक्षिप्त विवरण। कार्यान्वयन के उदाहरण के रूप में, मैं टेस्ट स्क्रिप्ट की भाषा के रूप में टाइपस्क्रिप्ट के साथ मूल रिपोर्ट से SerenityJS ले लूंगा।

हम TODO अनुप्रयोग पर प्रयोग करेंगे - कार्यों की एक सरल सूची बनाने के लिए एक आवेदन। उदाहरण के लिए, हम लाइब्रेरी के निर्माता जन मोलक (टाइपस्क्रिप्ट कोड, इसलिए हाइलाइट थोड़ा चला गया) से कोड का उपयोग करेंगे।

2009 में शुरू करते हैं

इस समय, सेलेनियम वेबड्राइवर दिखाई दिया, और लोगों ने इसका उपयोग करना शुरू कर दिया। दुर्भाग्य से, बड़ी संख्या में मामलों में, प्रौद्योगिकी की नवीनता और प्रोग्रामिंग अनुभव की कमी के कारण यह गलत है। परीक्षण पूर्ण कॉपी-पेस्ट, असमर्थित और "नाजुक" हो गए।

परिणाम एक नकारात्मक प्रतिक्रिया है और ऑटोटेस्ट्स के साथ एक खराब प्रतिष्ठा है। अंत में, सेलेनियम वेबड्राइवर के निर्माता साइमन स्टीवर्ट ने अपने लेख माई सेलेनियम टेस्ट में अनुपस्थित में अनुपस्थित उत्तर दिया ! । सामान्य संदेश: "यदि आपके परीक्षण नाजुक हैं और अच्छी तरह से काम नहीं करते हैं - यह सेलेनियम के कारण नहीं है, लेकिन क्योंकि परीक्षण स्वयं बहुत लिखित नहीं हैं।"

यह समझने के लिए कि क्या दांव पर है, आइए निम्नलिखित उपयोगकर्ता परिदृश्य पर एक नज़र डालें:

Feature: Add new items to the todo list In order to avoid having to remember things that need doing As a forgetful person I want to be able to record what I need to do in a place where I won't forget about them Scenario: Adding an item to a list with other items Given that James has a todo list containing Buy some cookies, Walk the dog When he adds Buy some cereal to his list Then his todo list should contain Buy some cookies, Walk the dog, Buy some cereal

Naive कार्यान्वयन "माथे पर" इस तरह दिखेगा:

 import { browser, by, element, protractor } from 'protractor'; export = function todoUserSteps() { this.Given(/^.*that (.*) has a todo list containing (.*)$/, (name: string, items: string, callback: Function) => { browser.get('http://todomvc.com/examples/angularjs/'); browser.driver.manage().window().maximize(); listOf(items).forEach(item => { element(by.id('new-todo')).sendKeys(item, protractor.Key.ENTER); }); browser.driver.controlFlow().execute(callback); }); this.When(/^s?he adds (.*?) to (?:his|her) list$/, (itemName: string, callback: Function) => { element(by.id('new-todo')) .sendKeys(itemName, protractor.Key.ENTER) .then(callback); }); this.Then(/^.* todo list should contain (.*?)$/, (items: string, callback: Function) => { expect(element.all(by.repeater('todo in todos')).getText()) .to.eventually.eql(listOf(items)) .and.notify(callback); }); };

जैसा कि आप देख सकते हैं, एक निम्न-स्तरीय एपीआई का उपयोग यहां किया जाता है, DOM के साथ जोड़तोड़, css चयनकर्ताओं की कॉपी-पेस्ट। यह स्पष्ट है कि भविष्य में, यूआई में एक छोटे से बदलाव के साथ, आपको कई स्थानों पर कोड को बदलना होगा।

एक समाधान के रूप में, सेलेनियम को इस तरह की समस्याओं से छुटकारा पाने के लिए कुछ अच्छा करने की पेशकश करनी थी, और साथ ही ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग में बहुत कम या कोई अनुभव नहीं है। इस तरह का एक समाधान पेज ऑब्जेक्ट था, कोड को व्यवस्थित करने के लिए एक पैटर्न।

मार्टिन फाउलर इसे एक HTML पृष्ठ या उसके टुकड़े के चारों ओर एक अमूर्त वस्तु के रूप में वर्णित करता है, जिससे आप HTML तत्वों को छूने के बिना पृष्ठ तत्वों के साथ बातचीत कर सकते हैं। आदर्श रूप में, ऐसी वस्तु को ग्राहक कोड को वह सब कुछ करने और देखने की अनुमति देनी चाहिए जो एक व्यक्ति कर सकता है और देख सकता है।

इस पैटर्न के अनुसार हमारे उदाहरण को फिर से लिखना, हमारे पास निम्नलिखित हैं:

 import { browser, by, element, protractor } from 'protractor'; class TodoList { What_Needs_To_Be_Done = element(by.id('new-todo')); Items = element.all(by.repeater('todo in todos')); addATodoItemCalled(itemName: string): PromiseLike<void> { return this.What_Needs_To_Be_Done.sendKeys(itemName, protractor.Key.ENTER); } displayedItems(): PromiseLike<string[]> { return this.Items.getText(); } } export = function todoUserSteps() { let todoList = new TodoList(); this.Given(/^.*that (.*) has a todo list containing (.*)$/, (name: string, items: string, callback: Function) => { browser.get('http://todomvc.com/examples/angularjs/'); browser.driver.manage().window().maximize(); listOf(items).forEach(item => { todoList.addATodoItemCalled(item); }); browser.driver.controlFlow().execute(callback); }); this.When(/^s?he adds (.*?) to (?:his|her) list$/, (itemName: string, callback: Function) => { todoList.addATodoItemCalled(itemName).then(() => callback()); }); this.Then(/^.* todo list should contain (.*?)$/, (items: string, callback: Function) => { expect(todoList.displayedItems()) .to.eventually.eql(listOf(items)) .and.notify(callback); }); };

पहली नज़र में, यह अच्छा लग रहा है - हमने नकल से छुटकारा पा लिया और एनकैप्सुलेशन को जोड़ा। लेकिन एक समस्या है: बहुत बार विकास की प्रक्रिया में ऐसे वर्ग बड़े आकार तक बढ़ते हैं।

आप इस कोड को स्वतंत्र घटकों में विघटित करने का प्रयास कर सकते हैं, लेकिन यदि कोड ऐसी स्थिति में पहुंच जाता है, तो यह पहले से ही इतनी मजबूती से युग्मित है कि यह बहुत मुश्किल हो सकता है और इसे स्वयं और पूरे ग्राहक कोड (परीक्षण मामलों) दोनों को फिर से लिखने की आवश्यकता होगी जो इसका उपयोग करते हैं वस्तु। वास्तव में, एक विशाल वर्ग एक बीमारी नहीं है, बल्कि एक लक्षण ( कोड गंध ) है। मुख्य समस्या एकल जिम्मेदारी सिद्धांत और खुले बंद सिद्धांत का उल्लंघन है। पृष्ठ ऑब्जेक्ट का तात्पर्य पृष्ठ के विवरण और एक इकाई में इसके साथ बातचीत करने के सभी तरीकों से है, जिसे इसके कोड को बदले बिना विस्तारित नहीं किया जा सकता है।

हमारे TODO वर्ग के लिए जिम्मेदारी के आवेदन निम्नानुसार हैं ( लेख से चित्र):
उत्तरदायित्व

यदि आप इस वर्ग को SOLID के सिद्धांतों के आधार पर अलग करने का प्रयास करते हैं, तो आपको निम्न के जैसा कुछ मिलेगा:

डोमेन मॉडल

पेज ऑब्जेक्ट के साथ जो अगली समस्या है, वह यह है कि यह पृष्ठों पर काम करता है। किसी भी स्वीकृति परीक्षण में, उपयोगकर्ता कहानियों का उपयोग करना आम है। व्यवहार प्रेरित विकास (BDD) और गेरकिन भाषा पूरी तरह से इस मॉडल को फिट करते हैं। यह समझा जाता है कि लक्ष्य के लिए उपयोगकर्ता का मार्ग (परिदृश्य) विशिष्ट कार्यान्वयन से अधिक महत्वपूर्ण है। उदाहरण के लिए, यदि आपने सभी परीक्षणों में लॉगिन विजेट का उपयोग किया है, तो लॉगिन विधि (प्रपत्र स्थानांतरित हो गया है, एकल साइन ऑन पर स्विच किया गया है) को बदलते समय, आपको सभी परीक्षणों को बदलना होगा। विशेष रूप से गतिशील परियोजनाओं में, यह समय लेने वाला और समय लेने वाला हो सकता है और टीम को तब तक लेखन परीक्षण स्थगित करने के लिए प्रोत्साहित कर सकता है जब तक कि पेज स्थिर नहीं हो जाते (भले ही उपयोग के मामलों के साथ सबकुछ स्पष्ट हो)।

इस समस्या को हल करने के लिए, यह दूसरी तरफ से देखने लायक है। हम निम्नलिखित अवधारणाओं का परिचय देते हैं:

भूमिकाएँ - यह सब किसके लिए है?
लक्ष्य - वे (उपयोगकर्ता) यहां क्यों हैं और वे क्या हासिल करना चाहते हैं?
कार्य - इन लक्ष्यों को प्राप्त करने के लिए उन्हें क्या करने की आवश्यकता है?
क्रिया - किसी कार्य को पूरा करने के लिए उपयोगकर्ता को पृष्ठ के साथ वास्तव में कैसे बातचीत करनी चाहिए?

इस प्रकार, प्रत्येक परीक्षण स्क्रिप्ट, उपयोगकर्ता के लिए एक स्क्रिप्ट , वास्तविक उपयोगकर्ता के लिए एक वास्तविक कहानी के निष्पादन के उद्देश्य से बन जाती है। यदि आप ऊपर वर्णित ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग के सिद्धांतों के साथ इस दृष्टिकोण को जोड़ते हैं, तो परिणाम एक स्क्रीनप्ले (या उपयोगकर्ता यात्रा ) पैटर्न होगा। PageObject से पहले भी उनके विचारों और सिद्धांतों को पहली बार 2007 में आवाज दी गई थी।

पटकथा

हम परिणामी सिद्धांतों का उपयोग करके अपने कोड को फिर से लिखते हैं।

जेम्स वह अभिनेता है जो इस परिदृश्य में हमारे उपयोगकर्ता की भूमिका निभाएगा। वह जानता है कि ब्राउज़र का उपयोग कैसे करना है।

 let james = Actor.named('James').whoCan(BrowseTheWeb.using(protractor.browser));

जेम्स का लक्ष्य अपनी सूची में पहला आइटम जोड़ना है:

  Scenario: Adding an item to a list with other items

इस लक्ष्य को महसूस करने के लिए, जेम्स को निम्नलिखित की आवश्यकता है:

कई मदों से युक्त सूची के साथ शुरू करें,
नया आइटम जोड़ें।

हम इसे दो वर्गों में तोड़ सकते हैं:

 import { PerformsTasks, Task } from 'serenity-js/lib/screenplay'; import { Open } from 'serenity-js/lib/screenplay-protractor'; import { AddATodoItem } from './add_a_todo_item'; export class Start implements Task { static withATodoListContaining(items: string[]) { return new Start(items); } performAs(actor: PerformsTasks) { return actor.attemptsTo( Open.browserOn('/examples/angularjs/'), ...this.addAll(this.items) ); } constructor(private items: string[]) { } private addAll(items: string[]): Task[] { return items.map(item => AddATodoItem.called(item)); } }

Task इंटरफ़ेस को performAs विधि को परिभाषित करने की आवश्यकता होती है, जहां अभिनेता को निष्पादन के दौरान स्थानांतरित किया जाएगा। attemptsTo - कॉम्बिनेटर फ़ंक्शन, किसी भी संख्या में फेरबदल स्वीकार करता है। इस प्रकार, आप विभिन्न प्रकार के दृश्यों का निर्माण कर सकते हैं। वास्तव में, यह कार्य जो भी करता है, वह वांछित पृष्ठ पर एक ब्राउज़र खोलता है और वहां तत्वों को जोड़ता है। अब एक तत्व जोड़ने के कार्य को देखते हैं:

 import { PerformsTasks, Task } from 'serenity-js/lib/screenplay'; import { Enter } from 'serenity-js/lib/screenplay-protractor'; import { protractor } from 'protractor'; import { TodoList } from '../components/todo_list'; export class AddATodoItem implements Task { static called(itemName: string) { return new AddATodoItem(itemName); } // required by the Task interface performAs(actor: PerformsTasks): PromiseLike<void> { // delegates the work to lower-level tasks return actor.attemptsTo( Enter.theValue(this.itemName) .into(TodoList.What_Needs_To_Be_Done) .thenHit(protractor.Key.ENTER) ); } constructor(private itemName: string) } }

यह अधिक दिलचस्प है, निम्न-स्तरीय क्रियाएं दिखाई देती हैं - पृष्ठ तत्व में पाठ दर्ज करें और Enter दबाएं। TodoList वह सब है जो पृष्ठ वस्तु के "वर्णनात्मक" भाग का रहता है, यहाँ हमारे पास css चयनकर्ता हैं:

 import { Target, Question, Text } from 'serenity-js/lib/screenplay-protractor'; import { by } from 'protractor'; export class TodoList { static What_Needs_To_Be_Done = Target .the('"What needs to be done?" input box') .located(by.id('new-todo')); static Items = Target .the('List of Items') .located(by.repeater('todo in todos')); static Items_Displayed = Text.ofAll(TodoList.Items); }

ठीक है, यह सत्यापित करना बाकी है कि सभी जोड़तोड़ के बाद सही जानकारी प्रदर्शित होती है। SerenityJS Question<T> इंटरफ़ेस प्रदान करता है - एक इकाई जो एक प्रदर्शित मूल्य या मूल्यों की एक सूची देता है (ऊपर उदाहरण में Text.ofAll )। कोई ऐसा प्रश्न कैसे लागू कर सकता है जो HTML तत्व का पाठ लौटाता है

 export class Text implements Question<string> { public static of(target: Target): Text { return new Text(target); } answeredBy(actor: UsesAbilities): PromiseLike<string[]> { return BrowseTheWeb.as(actor).locate(this.target).getText(); } constructor(private target: Target) { } }

क्या महत्वपूर्ण है, ब्राउज़र बाइंडिंग वैकल्पिक है। BrowseTheWeb सिर्फ एबिलिटी है , जो आपको ब्राउज़र के साथ बातचीत करने की अनुमति देता है। आप उदाहरण के लिए, RecieveEmails क्षमता को लागू कर सकते हैं, जो अभिनेता को पत्र पढ़ने के लिए अनुमति देता है (साइट पर पंजीकरण के लिए)।

यह सब एक साथ रखकर , हमें यह योजना ( जन मोलक से ) मिली:

और निम्न परिदृश्य:

 let actor: Actor; this.Given(/^.*that (.*) has a todo list containing (.*)$/, function (name: string, items: string) { actor = Actor.named(name).whoCan(BrowseTheWeb.using(protractor.browser)); return actor.attemptsTo( Start.withATodoListContaining(listOf(items)) ); }); this.When(/^s?he adds (.*?) to (?:his|her) list$/, function (itemName: string) { return actor.attemptsTo( AddATodoItem.called(itemName) ) }); this.Then(/^.* todo list should contain (.*?)$/, function (items: string) { return expect(actor.toSee(TodoList.Items_Displayed)).eventually.deep.equal(listOf(items)) });

सबसे पहले, परिणाम थोड़ा बड़े पैमाने पर दिखता है, लेकिन जैसे-जैसे सिस्टम बढ़ता है, पुन: उपयोग किए गए कोड की मात्रा बढ़ जाएगी, और लेआउट और पृष्ठ परिवर्तन केवल सीएसएस चयनकर्ताओं और निम्न-स्तर के कार्यों / प्रश्नों को प्रभावित करेंगे, स्क्रिप्ट और उच्च-स्तरीय कार्यों को व्यावहारिक रूप से अपरिवर्तित छोड़ देंगे।

कार्यान्वयन

यदि हम पुस्तकालयों के बारे में बात करते हैं, और इस पैटर्न को लागू करने के छोटे-छोटे शहरों के प्रयासों के बारे में नहीं, तो सबसे लोकप्रिय जावा के लिए Serenity BDD है। जावास्क्रिप्ट / टाइपस्क्रिप्ट अपने स्वयं के SerenityJS पोर्ट का उपयोग करता है। बॉक्स से बाहर, वह ककड़ी और मोचा के साथ काम करना जानती है।

एक त्वरित खोज ने .NET - ट्रैंक्वायर के लिए एक पुस्तकालय भी तैयार किया। मैं उसके बारे में कुछ नहीं कह सकता, क्योंकि मैं उससे पहले नहीं मिला था।

Serenity और SerenityJS का उपयोग करते समय, आप रिपोर्ट जनरेशन उपयोगिता का उपयोग कर सकते हैं।

चित्रों के साथ रिपोर्ट करें

मोचा का उपयोग कर कोड लें:

 describe('Finding things to do', () => { describe('James can', () => { describe('remove filters so that the list', () => { it('shows all the items', () => Actor.named('James').attemptsTo( Start.withATodoListContaining([ 'Write some code', 'Walk the dog' ]), CompleteATodoItem.called('Write some code'), FilterItems.toShowOnly('Active'), FilterItems.toShowOnly('All'), Ensure.theListOnlyContains('Write some code', 'Walk the dog'), )); }); }); });