ვებ დრაივერის IO სახელმძღვანელო ცოცხალი ვებსაიტის გამოყენებით და სამუშაო მაგალითები: 8 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:20

ვებ დრაივერი IO სამეურვეო პროგრამა ცოცხალი ვებსაიტის გამოყენებით და სამუშაო მაგალითები

ბოლო განახლება: 2015-26-07

(ხშირად გადაამოწმეთ ამ ინსტრუქციის განახლებისას უფრო დეტალურად და მაგალითებით)

ფონი

ამას წინათ საინტერესო გამოწვევა მქონდა. მე მჭირდებოდა ავტომატური ტესტირების დანერგვა Q/A განყოფილებაში ძალიან მცირე ტექნიკური გამოცდილებით და პროგრამირების არარსებობის გარეშე.

ეს მართლაც ორი (2) ცალკეული გამოწვევა იყო. პირველი იყო ტექნოლოგიების დადგენა ავტომატური ტესტირების შესასრულებლად. მეორე იყო Q/A განყოფილების მომზადება.

სტატია ეხება მხოლოდ გამოყენებულ ტექნოლოგიებს და იმას, რაც მე ვისწავლე ამ პროცესში.

ტექნოლოგიები კარგად მუშაობდა, მაგრამ მე ნამდვილად მომიწია ინფორმაციის ძებნა და მრავალი საათი გავატარე პრობლემების გარკვევაში.

გამიჭირდა ინფორმაციის მოძიება ინტერნეტში ამ ტექნოლოგიების შესახებ, ყველა ერთად.

მინდოდა გამეზიარებინა ეს ინფორმაცია, ამიტომ დავწერე ეს სტატია, საცდელი სკრიპტების და საცდელი ვებ – გვერდის ერთად, სკრიპტების საწინააღმდეგოდ.

ყველა სატესტო სკრიპტი შეგიძლიათ იხილოთ github– ზე და სამუშაო სატესტო საიტი მდებარეობს ვებ დრაივერის IO სამეურვეო ტესტირების საიტზე

ვიმედოვნებ, რომ ის თქვენთვის სასარგებლო იქნება. თუ ასეა, გთხოვთ შემატყობინოთ.

მიზნები გამოიყენეთ ტექნოლოგიები:

• შეამოწმეთ ვებგვერდის ფუნქციონირება
• შეამოწმეთ JavaScript ფუნქციონირება
• შესაძლებელია ხელით გაშვება
• შესაძლებელია ავტომატურად გაშვება

• ენის სწავლა ადვილია არა პროგრამისტებისთვის

  კითხვა/პერსონალი HTML და JavaScript– ის საბაზისო ცოდნით

• გამოიყენეთ მხოლოდ ღია პროგრამული უზრუნველყოფა

ტექნოლოგიები

მე ვირჩევ ტექნოლოგიების ჩამონათვალს:

• mocha - ტესტის მორბენალი - ასრულებს ტესტის სკრიპტებს
• mustjs - დამტკიცების ბიბლიოთეკა
• webdriverio - ბრაუზერის კონტროლის კავშირები (ენების კავშირები)
• სელენი - ბრაუზერის აბსტრაქცია და გაშვებული ქარხანა

• ბრაუზერი/მობილური მძღოლები + ბრაუზერები

  • Firefox (მხოლოდ ბრაუზერი)
  • Chrome (ბრაუზერი და მძღოლი)
  • IE (ბრაუზერი და მძღოლი)
  • Safari (ბრაუზერის და დრაივერის დანამატი)

ნაბიჯი 1: პროგრამული უზრუნველყოფის ინსტალაცია

დასაწყებად თქვენ უნდა გქონდეთ Node JS, Web Driver IO, Mocha, Should და Selenium ცალკე სერვერი დაინსტალირებული.

აქ მოცემულია Windows 7 -ის ინსტალაციის ინსტრუქცია.

(მე Mac/Linux– ის მომხმარებელი ვარ, მაგრამ Windows 7 -ის აპარატზე ყველაფერი უნდა დამეყენებინა, ამიტომაც ჩავრთე ის თქვენს მითითებისთვის. Mac/Linux– ზე დაყენების პროცედურა მსგავსია. გთხოვთ, გაეცნოთ ონლაინ ცნობებს უფრო მეტისთვის ინფორმაცია.)

ბრაუზერიდან:

• დააინსტალირეთ კვანძი, რომელიც მოიცავს NPM (Node Package Manager)

• გადადით

  • დააწკაპუნეთ ინსტალაციაზე
  • შეინახეთ და გაუშვით ფაილი
  • დააყენეთ გზა და ცვლადი (NODE_PATH)

  • გადადით საკონტროლო პანელში-> სისტემა და უსაფრთხოება-> სისტემა

    • მოწინავე სისტემის პარამეტრები

    • გარემოს დაყენება (მომხმარებლის ცვლადები)

      • დამატება PATH- ში

        C: / მომხმარებელი {USERNAME} AppData / როუმინგი / npm;

      • დაამატეთ NODE_PATH (სისტემის ცვლადები)

        C: / მომხმარებელი {USERNAME} AppData / როუმინგი / npm / node_modules

შენიშვნა: მე დავაყენე ყველა პროგრამა ქვემოთ npm გლობალური ვარიანტის (-g) გამოყენებით. ეს ჩვეულებრივ არ არის რეკომენდებული, მაგრამ ამ ინსტალაციისთვის მჭირდება გლობალური ინსტალაცია, რადგან ის გამოყენებული იქნება მრავალ პროექტში.

გახსენით ბრძანების სტრიქონი (სმდ):

(ადგილობრივი მომხმარებლის ადმინისტრატორი)

• დააინსტალირეთ სელენი "ვებ დრაივერი IO"

  • npm დააინსტალირეთ webdriverio -g

    ეს დააინსტალირებს ვებ დრაივერს IO გლობალურად თქვენს აპარატზე

• დააინსტალირეთ "mocha" test runner პროგრამული უზრუნველყოფა

  • npm დააინსტალირეთ mocha -g

    ეს დააინსტალირებს მოკას გლობალურად თქვენს აპარატზე

• დააინსტალირეთ "უნდა" დამტკიცების ბიბლიოთეკა

  • npm ინსტალაცია უნდა -g

    ეს დააინსტალირებს "უნდა" გლობალურად თქვენს აპარატზე

• დააინსტალირეთ Selenium Stand Alone სერვერი

  • გადადით
  • ჩამოტვირთეთ jar ფაილი და გადადით "სელენის" დირექტორიაში.

• დააინსტალირეთ ბრაუზერები და ბრაუზერის დრაივერები, რომლითაც შეგიძლიათ შეამოწმოთ

  • Cmd მოთხოვნიდან:

    • შექმენით "სელენის" დირექტორია
    • C: / მომხმარებელი {USERNAME} სელენი

    • ბრძანებები:

      • cd C: / მომხმარებლები {USERNAME}
      • მკდირი სელენი

    • Firefox

      • დააინსტალირეთ firefox ბრაუზერი, თუ უკვე არ არის დაინსტალირებული.
      • გზა უნდა იყოს მითითებული Firefox– ის დასაწყებად ბრძანების სტრიქონიდან (cmd).

      • საკონტროლო პანელი-> სისტემა და უსაფრთხოება-> სისტემა

        • მოწინავე სისტემის პარამეტრები
        • გარემოს პარამეტრები
        • დაამატეთ (დაამატეთ ნახევრად მსხვილი ნაწლავის გამოყენება) Path Variable- ს
        • C: / პროგრამის ფაილები (x86) Mozilla Firefox
      • Firefox– ისთვის სპეციალური ვებ დრაივერი არ არის საჭირო.

    • Chrome

      • დააინსტალირეთ Chrome ბრაუზერი, თუ უკვე არ არის დაინსტალირებული.
      • გზა შეიძლება იყოს მითითებული Chrome- ის დასაწყებად ბრძანების სტრიქონიდან (cmd).
      • პირველი ტესტირება: chrome.exe ბრძანების სტრიქონიდან (cmd)
      • თუ ქრომი არ იწყება მაშინ:

      • საკონტროლო პანელი-> სისტემა და უსაფრთხოება-> სისტემა

        • მოწინავე სისტემის პარამეტრები
        • გარემოს პარამეტრები
        • დაამატეთ (დაამატეთ ნახევრად მსხვილი ნაწლავის გამოყენება) Path Variable- ს
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • Chrome– ისთვის საჭიროა სპეციალური ვებ დრაივერი.

        გადადით chromium.org– ზე და გახსენით 32 ბიტიანი დრაივერი „სელენის“დირექტორიაში

    • Internet Explorer (მხოლოდ Windows– ისთვის - არ იმუშავებს სხვა პლატფორმებზე)

      • IE– სთვის საჭიროა სპეციალური ვებ დრაივერი.

        • გადადით
        • ჩამოტვირთეთ და გახსენით 64 ბიტიანი დრაივერი "სელენის" დირექტორიაში.

ნაბიჯი 2: ძირითადი ტესტის სკრიპტი

დავიწყოთ რამდენიმე საფუძვლით.

აქ არის მარტივი მოკას სკრიპტი, რომელიც გახსნის ვებსაიტს და გადაამოწმებს სათაურს.

// tutorial1.js

// // ეს არის მარტივი საცდელი სკრიპტი ვებგვერდის გასახსნელად და // სათაურის შესამოწმებლად. // საჭირო ბიბლიოთეკები var webdriverio = მოითხოვს ('webdriverio'), უნდა = მოითხოვს ('უნდა'); // საცდელი სკრიპტის ბლოკი ან კომპლექტი აღწერს ('სათაურის ტესტი ვებ დრაივერისთვის IO - სამეურვეო სატესტო გვერდის ვებსაიტი', ფუნქცია () {// დააყენეთ ვადა 10 წამამდე this.timeout (10000); var მძღოლი = {}; // hook ადრე ტესტებამდე (ფუნქცია (შესრულებულია) {// ჩატვირთეთ მძღოლი ბრაუზერის მძღოლისთვის = webdriverio.remote ({სასურველი შესაძლებლობები: {browserName: 'firefox'}}); driver.init (შესრულებულია);}); // საცდელი სპეციფიკაცია - "სპეციფიკაცია" ეს ("უნდა იყოს ჩატვირთული სწორი გვერდი და სათაური", ფუნქცია () {// გვერდის ჩატვირთვა, შემდეგ ფუნქციის გამოძახება () მძღოლის დაბრუნება.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // მიიღეთ სათაური, შემდეგ გადაეცით სათაურს ფუნქცია ().getTitle (). შემდეგ (ფუნქცია (სათაური) {// გადაამოწმეთ სათაური (სათაური).should.be.equal ("ვებ დრაივერის IO - სამეურვეო ტესტი გვერდი "); // უკომენტარო კონსოლის გამართვისთვის // console.log ('ახლანდელი გვერდის სათაური:' + სათაური);});}); //" კაკალი "ამ ბლოკში ყველა ტესტის შემდეგ გასაშვებად (ფუნქცია (შესრულებულია) {driver.end (დასრულდა);});});

დაკვირვებები:

• თქვენ ჯერ უნდა შეამჩნიოთ, რომ ტესტის სკრიპტი დაწერილია JAVASCRIPT (მთავრდება.js გაფართოებით).

• ძირითადი სტრუქტურა თითქმის იდენტურია ყველა ტესტის სკრიპტისთვის.

  • სათაურის კომენტარები (//)
  • საჭირო ბიბლიოთეკები
  • პარამეტრების დაყენება (სურვილისამებრ)
  • Hook: ჩატვირთეთ ბრაუზერის დრაივერი
  • სატესტო კომპლექტი (აღწერეთ)
  • ტესტის სპეციფიკაციები (შეიძლება იყოს ბევრი სპეციფიკა Suite– ში)
  • ჰუკი: გაწმინდე

• ტესტის ნაკრები იწყება აღწერილი ფუნქციით, რომელიც იღებს ორ პარამეტრს:

  • სიმებიანი - სატესტო კომპლექტის აღწერა

    • ”შეამოწმეთ გვერდი სწორი სიტყვიერებისათვის”
    • "გადაამოწმეთ რადიო ღილაკების ოპერაციები"

  • ფუნქცია - კოდის ბლოკი შესასრულებლად

    აღწერეთ („სატესტო კომპლექტის აღწერა“, ფუნქცია () {});

• საცდელი კომპლექტი შეიცავს 1 ან მეტ ტესტის სპეციფიკაციას (სპეციფიკაცია)

• სპეციფიკაციები იწყება მისი ფუნქციით, რომელიც იღებს ორ პარამეტრს:

  • სიმებიანი - ტესტის სპეციფიკაციის აღწერა

    • "უნდა იყოს ბმულის სწორი ტექსტი და ბმულის URL"
    • "უნდა შეიცავდეს სწორ სიტყვას (ასლი გემბანი)
  • ფუნქცია - კოდის ბლოკი შესასრულებლად
  • it (‘ტესტის სპეციფიკაციის აღწერა’, ფუნქცია () {});
• სპეციფიკაცია შეიცავს ერთ ან მეტ მოლოდინს, რომელიც ამოწმებს კოდის მდგომარეობას

• მათ უწოდებენ მტკიცებებს

  ბიბლიოთეკა "უნდა" ბიბლიოთეკას ადასტურებს

• თითქმის ყველა შემთხვევაში, თქვენ დაგჭირდებათ ერთი ან მეტი ელემენტის პოვნა სელექტორის გამოყენებით და შემდეგ განახორციელოთ გარკვეული მოქმედება ელემენტზე (ელემენტებზე)

  • მაგალითები:

    • იპოვეთ ტექსტი გვერდზე და გადაამოწმეთ ტექსტი
    • შეავსეთ ფორმა და გაგზავნეთ
    • გადაამოწმეთ ელემენტის CSS

მოდით უფრო ახლოს განვიხილოთ მაგალითი კომენტარებით

ჩატვირთეთ საჭირო ბიბლიოთეკები: ვებ დრაივერი IO და უნდა.

// საჭირო ბიბლიოთეკები

var webdriverio = მოითხოვს ('webdriverio'), უნდა = მოითხოვს ('უნდა');

განსაზღვრეთ ტესტის ნაკრები. ამ პაკეტს ჰქვია: "სათაურის ტესტი ვებ დრაივერისთვის IO - სამეურვეო სატესტო გვერდის ვებსაიტი"

// საცდელი სკრიპტის ბლოკი ან კომპლექტი

აღწერეთ ('სათაურის ტესტი ვებ დრაივერისთვის IO - სამეურვეო სატესტო გვერდის ვებსაიტი', ფუნქცია () {…});

დააყენეთ ვადა 10 წამზე ისე, რომ სკრიპტი არ ამოიწურება გვერდის ჩატვირთვისას.

// დააყენეთ დროის 10 წამი

this.timeout (10000);

Hook ჩატვირთეთ ბრაუზერის დრაივერი სანამ დაიწყებთ სპეციფიკაციებს "specs". ამ მაგალითში დატვირთულია Firefox დრაივერი.

// კაკალი ტესტებამდე გასაშვებად

ადრე (ფუნქცია (შესრულებულია) {// ჩატვირთეთ მძღოლი ბრაუზერის დრაივერისთვის = webdriverio.remote ({სასურველი შესაძლებლობები: {browserName: 'firefox'}}}); driver.init (შესრულებულია);});

განსაზღვრეთ ტესტის სპეციფიკა.

// ტესტის სპეციფიკა - "სპეციფიკაცია"

ის ('უნდა იყოს ჩატვირთული სწორი გვერდი და სათაური', ფუნქცია () {…});

ჩატვირთეთ ვებგვერდის გვერდი

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

მიიღეთ სათაური, შემდეგ გადაეცით ფუნქციას ფუნქცია ()

.getTitle (). შემდეგ (ფუნქცია (სათაური) {

… });

გადაამოწმეთ სათაური სავალდებულო ბიბლიოთეკის გამოყენებით.

(სათაური).should.be.equal ("ვებ დრაივერის IO - სამეურვეო ტესტი გვერდი");

Hook დატოვეთ და გაასუფთავეთ მძღოლი დასრულების შემდეგ.

// "კაკალი" ამ ბლოკში ყველა გამოცდის შემდეგ გასაშვებად

შემდეგ (ფუნქცია (შესრულებულია) {driver.end (დასრულებულია);});

ნაბიჯი 3: გაუშვით ტესტის სკრიპტი

ახლა ვნახოთ რას აკეთებს ტესტის სკრიპტი გაშვებისას.

ჯერ დაიწყეთ სელენის დამოუკიდებელი სერვერი:

• Windows- ისთვის გამოიყენეთ ბრძანების ხაზი (cmd):

  • java -jar
  • # java -jar selenium-server-standalone-2.46.0.jar

• Mac ან Linux– ისთვის, გახსენით ტერმინალი:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• იხილეთ სკრინშოტი ზემოთ

შემდეგ გაუშვით ტესტის სკრიპტი:

• Windows- ისთვის გამოიყენეთ ბრძანების ხაზი (cmd):

  • მოკა
  • # mocha tutorial1.js

• Mac ან Linux– ისთვის, გახსენით ტერმინალი:

  • მოკა
  • $ mocha tutorial.js
• იხილეთ სკრინშოტი ზემოთ

მაშ რა მოხდა?

მოჩა იძახებს სკრიპტს "tutorial1.js". მძღოლმა დაიწყო ბრაუზერი (Firefox), ჩატვირთა გვერდი და გადაამოწმა სათაური.

ნაბიჯი 4: ვებსაიტის მაგალითი

ყველა მაგალითი ეწინააღმდეგება ამ საიტს.

მაგალითი ვებ – გვერდი მდებარეობს: ვებ დრაივერის IO სამეურვეო სატესტო გვერდზე

ყველა სატესტო სკრიპტის გადმოწერა შესაძლებელია github– დან.

ნაბიჯი 5: კონკრეტული მაგალითები

ყველა კოდი ხელმისაწვდომია github– ზე: ვებ დრაივერის IO სამეურვეო პროგრამა github– ზე

• დაადასტურეთ ბმული და ბმული ტექსტი შეუსაბამო სიაში - "linkTextURL1.js"

  • შეუსაბამო სიას აქვს და ბმული არის სიის მე -4 პუნქტი.
  • URL უნდა იყოს "https://tlkeith.com/contact.html"

// დაადასტურეთ კონტაქტი ბმულის ტექსტი

ის ("უნდა შეიცავდეს კონტაქტის ბმულის ტექსტს", ფუნქცია () {მძღოლის დაბრუნება.getText ("// ul [@id = 'mylist']/li [4]/a"). შემდეგ (ფუნქცია (ბმული) {კონსოლი.log ('ლინკი ნაპოვნია:' + ბმული); (ბმული).should.equal ("დაგვიკავშირდით");});}); // გადაამოწმეთ კონტაქტი.შემდეგ (ფუნქცია (ბმული) {(ბმული).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL ნაპოვნია:' + ბმული);});});

• საავტორო ტექსტის გადამოწმება - "Copyright1.js"

  • საავტორო უფლება არის ქვედა კოლონტიტულში ეს მაგალითი გვიჩვენებს საავტორო უფლებების ტექსტის განთავსების 2 სხვადასხვა გზას:

    • როგორც ელემენტის ამომრჩევი
    • ელემენტის ამომრჩევლად xpath– ის გამოყენებით

// საავტორო უფლებების ტექსტის გადამოწმება, როგორც ელემენტის ამომრჩევი

ის ('უნდა შეიცავდეს საავტორო უფლებების ტექსტს', ფუნქცია () {მძღოლის დაბრუნება.getText ("#საავტორო უფლება"). შემდეგ (ფუნქცია (ბმული) {console.log ("საავტორო უფლება მოიძებნა:" + ბმული); (ბმული). უნდა. თანაბარი ("ტონი კეიტი - tlkeith.com @ 2015 - ყველა უფლება დაცულია.");});}); // საავტორო უფლებების ტექსტის გადამოწმება xpath- ის გამოყენებით, როგორც ელემენტის ამომრჩევი ('უნდა შეიცავდეს საავტორო უფლებების ტექსტს', ფუნქცია () {მძღოლის დაბრუნება.getText ("// footer/center/p"). შემდეგ (ფუნქცია (ბმული) {console.log ('საავტორო უფლება ნაპოვნია:' + ბმული); (ბმული).should.equal ("ტონი კიტი - tlkeith.com @ 2015 - ყველა უფლება დაცულია.");});});

• შეავსეთ ფორმის ველები და გაგზავნეთ - "formFillSubmit1.js"

  • შეავსეთ სახელი, გვარი და წარადგინეთ, შემდეგ დაელოდეთ შედეგებს.

  • ეს მაგალითი გვიჩვენებს პირველი მეთოდის შევსების 3 მეთოდს:

    • პირადობის მოწმობით
    • შეყვანისგან xpath– ით
    • xpath ფორმა-> შეყვანისგან
  • ასევე გვიჩვენებს, თუ როგორ უნდა გაიწმინდოს შეყვანის ველი

// მიუთითეთ პირველი სახელი id– ის გამოყენებით: ტონი

ის ('უნდა დაერქვას სახელი ტონი', ფუნქცია () {დაბრუნება driver.setValue ("#სახელი", "ტონი").getValue ("#სახელი"). შემდეგ (ფუნქცია (ე) {(ე). უნდა.be.equal ("ტონი"); console.log ("სახელი:" + ე);});}); // გაასუფთავეთ პირველი სახელი მისი id ("უნდა გაასუფთაოთ სახელი", ფუნქცია () {return driver.clearElement ("#სახელი").getValue ("#სახელი"). შემდეგ (ფუნქცია (ე) {(ე).should.be.equal (""); console.log ("სახელი:" + ე);});}); // დააყენეთ პირველი სახელი xpath– ის გამოყენებით შეყვანისას: ტონი ის („უნდა დაერქვას სახელი ტონი“, ფუნქცია () {return driver.setValue ("// input [@name = 'fname']", "Tony").getValue ("// შეყვანა [@name = 'fname']"). შემდეგ (ფუნქცია (ე) {(ე).should.be.equal ("ტონი"); console.log ("სახელი:" + ე);});}); // გაასუფთავე სახელი xpath- ის გამოყენებით მისი შეყვანისგან ('უნდა გაასუფთაო სახელი', ფუნქცია () {return driver.clearElement ("// input [@name = 'fname']").getValue ("// input [@name = 'fname'] "). მაშინ (ფუნქცია (e) {(e).should.be.equal (" "); console.log (" სახელი: " + e);});});}); // დააყენეთ პირველი სახელი xpath– ის გამოყენებით ფორმით: ტონი ის („უნდა დაერქვას სახელი ტონი“, ფუნქცია () {return driver.setValue ("// ფორმა [@id = 'საძიებო ფორმა']/შეყვანა [1] "," ტონი ").getValue (" // ფორმა [@id = 'საძიებო ფორმა']/შეყვანა [1] "). შემდეგ (ფუნქცია (ე) {(ე). უნდა. Be.equal ("ტონი"); console.log ("სახელი:" + ე);});}); // დააყენეთ გვარი id- ის გამოყენებით: Keith it ('გვარი Keith- ს უნდა მიენიჭოს', ფუნქცია () {return driver.setValue ("#lname", "Keith").getValue ("#lname") შემდეგ (ფუნქცია (ე) {(ე).should.be.equal ("Keith"); console.log ("გვარი:" + e);});}); // წარუდგინე ფორმა და დაელოდე ძებნის შედეგებს ('უნდა წარადგინო ფორმა და დაელოდო შედეგებს', ფუნქცია () {return driver.submitForm ("#search-form"). შემდეგ (ფუნქცია (ე) {console.log (' წარადგინეთ საძიებო ფორმა ');}).waitForVisible ("#search-results", 10000).მერე (ფუნქცია (ე) {console.log ("ძიების შედეგები ნაპოვნია");});});

• დააჭირეთ ღილაკს ჩვენება/დამალვა და ტექსტის გადამოწმება - "showHideVerify1.js"

  • ტექსტი არის ჩვენების/დამალვის ელემენტში. ღილაკი აკონტროლებს მდგომარეობას.

  • ეს მაგალითი გვიჩვენებს:

    • დააწკაპუნეთ ღილაკზე გასაფართოებლად
    • დაელოდეთ ელემენტის ხილვას (გაფართოებას)
    • ტექსტის გადამოწმება (გემბანის ასლი)

// დააწკაპუნეთ ღილაკზე "მეტი ინფორმაცია" და გადაამოწმეთ ტექსტი გაფართოებულ ელემენტში

ის ("უნდა დააწკაპუნო მეტი ინფორმაციის ღილაკზე და დაადასტურო ტექსტი", ფუნქცია () {მძღოლის დაბრუნება. დაწკაპუნება ("#moreinfo"). შემდეგ (ფუნქცია () {console.log ("დააწკაპუნეთ მეტი ინფორმაციის ღილაკზე");}).waitForVisible ("#collapseExample", 5000).getText ("// div [@id = 'CollaExample']/div"). შემდეგ (ფუნქცია (ე) {console.log ("ტექსტი: ' + ე); (ე). უნდა. იყოს თანაბარი ("ყველაფერი კარგი წავიდეთ აქ!");});});

• ფორმის ველის შეცდომების დადასტურება - "formFieldValidation.js"

  • გამოიყენეთ სატესტო სკრიპტები, რომ შეამოწმოთ სწორი შეცდომის შეტყობინებები.

  • ეს მაგალითი გვიჩვენებს:

    შეცდომის ტექსტური შეტყობინებების გადამოწმება და ადგილმდებარეობის გადამოწმება (სიის არაორგანიზებული პოზიცია)

ის ('უნდა შეიცავდეს 5 შეცდომას: პირველი/ბოლო/მისამართი/ქალაქი/სახელმწიფო', ფუნქცია () {

მძღოლის დაბრუნება.getText ("// ul [@class = 'alert alert-rrezik']/li [1]"). შემდეგ (ფუნქცია (ე) {console.log ('ნაპოვნია შეცდომა:' + ე); (ე).should.be.equal ('გთხოვთ შეიყვანეთ სახელი');}).getText ("// ul [@class = 'alert alert-საფრთხე']/li [2]"). შემდეგ (ფუნქცია (ე) {console.log ('შეცდომა ნაპოვნია:' + e); (ე).should.be.equal ('გთხოვთ შეიყვანეთ გვარი');}).getText ("// ul [@class = 'alert alert-საფრთხე ']/li [3] "). მაშინ (ფუნქცია (ე) {console.log (' შეცდომა ნაპოვნია: ' + ე); (ე).should.be.equal (' გთხოვთ შეიყვანოთ მისამართი ');}). getText ("// ul [@class = 'alert alert-საფრთხე']/li [4]"). შემდეგ (ფუნქცია (ე) {console.log ("ნაპოვნია შეცდომა: ' + ე); (ე). უნდა.be.equal ('გთხოვთ შეიყვანოთ ქალაქი');}).getText ("// ul [@class = 'alert alert-საფრთხე']/li [5]"). შემდეგ (ფუნქცია (ე) {console.log ('ნაპოვნია შეცდომა:' + ე); (ე).should.be.equal ('გთხოვთ შეიყვანოთ მდგომარეობა');}); });

• მონაცემების გადატვირთვა URL ბმულის/ტექსტის/გვერდის შესამოწმებლად - "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 "," სახელი ":" formFillSubmit1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js "," name ":" showHideVerify1.js "}, {" link ":" 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 ": "დებიუ 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 (ფუნქცია (დ) {ის ('უნდა შეიცავდეს ტექსტს/ბმულს შემდეგ გადავიდე გვერდზე -' + დ. სახელი, ფუნქცია () {მძღოლის დაბრუნება // დარწმუნდით, რომ საწყის გვერდზე ხართ).url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). შემდეგ (ფუნქცია (სათაური) {// გადაამოწმეთ სათაური (სათაური).should.be.equal ("ვებ დრაივერი IO - სამეურვეო სატესტო გვერდი ");}) // იპოვეთ URL.getAttribute ('a =' + d.name," href "). შემდეგ (ფუნქცია (ბმული) {(ბმული). უნდა. Equal (d.link); console.log ('URL ნაპოვნია:' + d.link);}) // გადადით URL გვერდზე და შეამოწმეთ მისი არსებობა. დააწკაპუნეთ ('a =' + d.name).waitForVisible ("#js-repo-pjax- კონტეინერი ", 10000).მერე (ფუნქცია () {console.log (" Github გვერდი ნაპოვნია ");});});});

• ფორმალური ველების შესავსებად სტატიკური მონაცემების გადატანა - "loopDataExample2.js"

  • ეს მაგალითი გვიჩვენებს: გამოიყენეთ JSON მონაცემების მასივი სახელი/გვარის შესანახად

    • გადახედეთ მონაცემებს ფორმის ველების შესავსებად, შემდეგ წარადგინეთ ფორმა
    • დაელოდეთ შედეგების გვერდს
    • შედეგების გვერდზე დაადასტურეთ სახელი / გვარი

// მონაცემთა მასივი - firstName და lastNamevar dataArray = [{"firstName": "ტონი", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ":" ჯეინი "," გვარი ":" დო "}, {" პირველი სახელი ":" დონ "," გვარი ":" ჯონსონი "}]; … // შეახვიეთ თითოეული dataArray dataArray.forEach (ფუნქცია (დ) {it ('უნდა შეავსოს ველები, sumbit გვერდი', ფუნქცია () {დაბრუნება მძღოლი // დარწმუნდით, რომ საწყის გვერდზე ხართ.url ('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). შემდეგ (ფუნქცია (სათაური) {// გადაამოწმეთ სათაური (სათაური).should.be.equal ("ვებ დრაივერის IO - სამეურვეო ტესტი გვერდი");}).setValue ("#სახელი", d.firstName).getValue ("#სახელი"). შემდეგ (ფუნქცია (ე) {(ე). უნდა. იყოს თანაბარი (d.firstName); console.log ("პირველი სახელი: " + ე);}).setValue ("#lname ", d.lastName).getValue ("#lname "). შემდეგ (ფუნქცია (ე) {(ე). უნდა. Be.equal (d.lastName); console.log ("გვარი:" + ე);}).submitForm ("#საძიებო ფორმა"). შემდეგ (ფუნქცია () {console.log ("ძებნის ფორმის წარდგენა");}).waitForVisible ("#search-results", 10000).მერე (ფუნქცია () {console.log ('შედეგის გვერდი ნაპოვნია');}).getText ("// h1"). შემდეგ (ფუნქცია (ბმული) {console.log ('ტექსტი მოიძებნა:' + ბმული); (ბმული). უნდა. თანაბარი ("მოგესალმებით" + d.firstName + "" + d.lastName + ".");});});});

• შეამოწმეთ CSS თვისებები - "cssValidation1.js"

  • ეს მაგალითი გვიჩვენებს, თუ როგორ:

    • შეამოწმეთ შემდეგი CSS თვისებები:

      • ფერი
      • ბალიში (ზედა, ქვედა, მარჯვენა, მარცხენა)
      • ფონის ფერი

ის ('უნდა შეიცავდეს შეცდომის ტექსტის სწორ ფერს', ფუნქცია () {მძღოლის დაბრუნება.getCssProperty ("// ul [@class = 'alert alert-საფრთხე']/li [1]", "ფერი"). შემდეგ (ფუნქცია (შედეგი) {console.log ("ფერი ნაპოვნია:" + result.parsed.hex + "ან" + result.value); (result.parsed.hex).should.be.equal ('#a94442'); });});

ის ('უნდა შეიცავდეს ცხრილის უჯრედში სწორ შევსებას', ფუნქცია () {

მძღოლის დაბრუნება // შევსება: ზედა მარჯვენა ქვედა მარცხენა.getCssProperty ("// მაგიდა [@id = 'ფაილების სია"]/thead/tr [1]/td [1] "," შევსება-ზედა "). შემდეგ (ფუნქცია (შედეგი) {console.log ('padding-top found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// მაგიდა [@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- მარჯვნივ "). შემდეგ (ფუნქცია (შედეგი) {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 ');}); });

ის ('უნდა შეიცავდეს ფონის სწორ ფერს ცხრილის სათაურში', ფუნქცია () {

მძღოლის დაბრუნება.getCssProperty ("// ცხრილი [@id = 'filelist']/thead", "background-color"). შემდეგ (ფუნქცია (შედეგი) {console.log ('ფონის ფერი ნაპოვნია:' + result.parsed hex); (result.parsed.hex). should.be.equal ('#eeeeee');}); });

ნაბიჯი 6: რჩევები და ხრიკები

• გამართვა:

  • ჩართეთ დრაივერის დონეზე შესვლა მეტი გამართვისთვის და ჟურნალების შესაქმნელად.

    • დააყენეთ logLevel 'სიტყვიერად'
    • დააყენეთ logOutput დირექტორიის სახელზე ('ჟურნალები')

მძღოლი = webdriverio.remote (loglevel: 'verbose', logOutput: 'logs', {სასურველი შესაძლებლობები: {browserName: 'firefox'}});

• გამოსაყენებლად გამოიყენეთ console.log (), გამართვა (), getText ().

  • console.log () - გამოიყენეთ ინფორმაციის ჩვენება მდგომარეობის დასადგენად.
  • გამართვა () - გამოიყენეთ პაუზის ბრაუზერი/სკრიპტი, სანამ ბრძანებათა სტრიქონზე შესვლა არ არის დაჭერილი.

  • getText () - გამოიყენეთ იმის დასადასტურებლად, რომ თქვენ სწორ ელემენტთან ურთიერთობთ.

    განსაკუთრებით დამხმარეა xpath გამონათქვამებით

// დააწკაპუნეთ სიიდან 3 პუნქტზე

ის ("უნდა დააწკაპუნოთ სიიდან 3 პუნქტზე", ფუნქცია () {// გამოიყენეთ getText (), რომ გადაამოწმოს xpath არის სწორი ელემენტის დაბრუნების დრაივერისთვის.getText ("// ul [@id = 'mylist']/li [3]/div/div/a "). შემდეგ (ფუნქცია (ბმული) {// გამოიყენეთ console.log () ინფორმაციის გამოსაქვეყნებლად console.log (" ლინკი ნაპოვნია: " + ბმული); (ბმული). უნდა. თანაბარი ("პუნქტი 3");}) // გამოიყენეთ debug () მოქმედების შესაჩერებლად რათა ნახოთ რა ხდება ბრაუზერში.debug (). დააწკაპუნეთ ("// ul [@id = 'mylist']/li [3] /div/div/a").then (ფუნქცია () {console.log ('ლინკი დაწკაპუნებულია');}) // დაელოდეთ Google- ის საძიებო ფორმის გამოჩენას.waitForVisible ("#tsf", 20000).მერე (ფუნქცია (ე) {console.log ('ძიების შედეგები ნაპოვნია');});});

• გამოიყენეთ გარემოს ცვლადი ბრაუზერის დინამიურად შესაცვლელად:

  • გამოიყენეთ გარემოს ცვლადი SELENIUM_BROWSER სხვადასხვა ბრაუზერის გამოსაძახებლად საცდელი სკრიპტის ყოველ ჯერზე შეცვლის გარეშე.
  • მხარდაჭერისთვის მოითხოვს მცირეოდენი კოდირების ცვლილებას.

კოდის ცვლილებები:

// ბრაუზერის დრაივერის ჩატვირთვა

მძღოლი = webdriverio.remote ({სასურველი შესაძლებლობები: {browserName: process.env. SELENIUM_BROWSER || 'chrome'}});

მხარდაჭერილი ბრაუზერები:

• Internet Explorer - IE 8+ (მხოლოდ Windows)

  SELENIUM_BROWSER = ანუ მოხა

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER = firefox მოკა

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER = ქრომირებული მოკა

• ოპერა 12+

  SELENIUM_BROWSER = ოპერის მოხა

• საფარი

  SELENIUM_BROWSER = საფარი მოკა

ტესტირება:

• Windows– ისთვის გამოიყენეთ git bash shell:

  • SELENIUM_BROWSER = ქრომირებული მოკა
  • $ SELENIUM_BROWSER = ქრომირებული მოხა DynamicBrowser.js

• Mac ან Linux– ისთვის, გახსენით ტერმინალი:

  • SELENIUM_BROWSER = ქრომირებული მოკა
  • $ SELENIUM_BROWSER = ქრომირებული მოხა DynamicBrowser.js

• საპასუხო ტესტირება:

  • განსაზღვრეთ შესვენების წერტილები პროექტის ან ჩარჩოს საფუძველზე (ანუ ჩამტვირთავი).

  • განსაზღვრეთ გარე ცვლადები თითოეული შესვენების წერტილისთვის:

    • მაგიდა - 1200 პიქსელი
    • ცხრილი - 992 px
    • მობილური - 768 პიქსელი

  • შეიმუშავეთ მრავალჯერადი გამოყენების ბრძანება გარემოს ცვლადის წასაკითხად და ბრაუზერის ზომის დასადგენად.

    იხილეთ მაგალითი ქვემოთ

  • გამოიძახეთ მრავალჯერადი გამოყენების ბრძანება თქვენს ტესტის სკრიპტში.

// მრავალჯერადი გამოყენების კოდი - ბიბლიოთეკა // კოდის ფრაგმენტი if (bp == "DESKTOP") {obj.width = 1200; obj. სიმაღლე = 600; obj.name = bp; } else if (bp == "TABLET") {obj.width = 992; obj. სიმაღლე = 600; obj.name = bp; } else if (bp == "MOBILE") {obj.width = 768; obj. სიმაღლე = 400; obj.name = bp; }

// საცდელი სკრიპტი

ადრე (ფუნქცია (შესრულებულია) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (მძღოლი));} // ფანჯრის ზომის დაყენება ის ('უნდა დააყენოს ფანჯრის ზომა', ფუნქცია (შესრულებულია) {// მხოლოდ სიგანეს აქვს მნიშვნელობა driver.setWindowSize (winsize.width, winsize.height, function () {}). ზარი (შესრულებულია);});

• მრავალჯერადი გამოყენების ბრძანებები (საბაჟო ბრძანებები):

  • ვებ დრაივერის IO ადვილად გაფართოებადია.
  • მე მიყვარს ბიბლიოთეკაში ყველა მრავალჯერადი გამოყენების ბრძანების შეტანა. (შეიძლება ეს ძველი სკოლაა, მაგრამ მუშაობს!)

common/commonLib.js

// verifyLastNameCheckError ()

// // აღწერა: // ადასტურებს გვარის ფორმის დამტკიცების შეცდომის შეტყობინებას // // შეყვანა: // ნომერი - შეცდომის ინდექსი (1-5) // გამომავალი: // არცერთი // var verifyLastNameCheckError = ფუნქცია () { var idx = არგუმენტები [0], გამოძახება = არგუმენტები [არგუმენტები. სიგრძე - 1]; ეს.getText ("// ul [@class = 'alert alert-საფრთხე']/li [" + idx + "]", ფუნქცია (err, e) {console.log ('შეცდომა ნაპოვნია:' + e); (ე).should.be.equal ('გთხოვთ შეიყვანეთ გვარი');}). დარეკეთ (გამოძახება); }; // ფუნქციის ექსპორტი module.exports.verifyLastNameCheckError = verifyLastNameCheckError;

აქ მოცემულია კონკრეტული ცვლილებები, რომლებიც საჭიროა მრავალჯერადი გამოყენების ფუნქციის გამოსაძახებლად

იხილეთ formFieldValidation.js სრული მუშაობის მაგალითისთვის

// მოითხოვს მრავალჯერადი გამოყენების ბრძანებას - CommonLib

საერთო = მოითხოვს ('./ Common/CommonLib'); … // აკავშირებს ბრძანებებს driver.addCommand ('verifyFirstNameError', common.verifyFirstNameCheckError.bind (მძღოლი)); driver.addCommand ('verifyLastNameError', common.verifyLastNameCheckError.bind (მძღოლი)); ის ('უნდა შეიცავდეს 2 შეცდომას: სახელი/გვარი', ფუნქცია () {// გამოვიძახოთ მრავალჯერადი გამოყენების ფუნქცია დრაივერზე.verifyFirstNameError (1);.verifyLastNameError (2);});

• პროექტის ფაილი/დირექტორია სტრუქტურა:

  • აქ არის ტიპიური პროექტის სტრუქტურა:

    • "პროექტი" - პროექტის მთავარი დირექტორია

      • README.md - readme გლობალური პროექტისთვის

      • "საერთო" - დირექტორია გლობალური ფუნქციებისათვის, რომელიც საერთოა ყველა პროექტში

        • common -lib.js - გლობალური ფუნქციის ბიბლიოთეკა
        • README.md - readme გლობალური ფუნქციებისათვის

      • "პროდუქტი 1" - დირექტორია პროდუქტის 1

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

        • "საერთო" - დირექტორია ადგილობრივი ფუნქციების პროექტი 1

          • prod1 -lib.js - ადგილობრივი ფუნქციური ბიბლიოთეკა პროექტის 1 -ისთვის
          • README.md - readme ადგილობრივი ფუნქციების პროექტის 1

      • "პროდუქტი 2"-დირექტორია პროდუქტისთვის 2test-script1.jstest-script2.js

        • "საერთო" - დირექტორია ადგილობრივი ფუნქციების პროექტი 2

          • prod2 -lib.js - ადგილობრივი ფუნქციური ბიბლიოთეკა პროექტისთვის 2
          • README.md - readme ადგილობრივი ფუნქციების პროექტში 2

• ტესტის სკრიპტების გაყოფა მრავალ ფაილში:

  • აქ მოცემულია რამდენიმე ფაილის გამოყენების მაგალითი:

    • საღი აზრის შემოწმება - ძირითადი ტესტის სკრიპტი, რომ შეამოწმოთ ყველაფერი მუშაობს
    • სტატიკური ელემენტი და ტექსტის დადასტურება - გადაამოწმეთ ყველა ელემენტი და ტექსტი
    • ფორმის/გვერდის შეცდომის დადასტურება - შეცდომის დადასტურება
    • ძიების შედეგები - შეამოწმეთ დინამიური შინაარსი

• გამოძახება VS. დაპირებები:

  • ვებ დრაივერის IO ვერსია 3 მხარს უჭერს როგორც გამოძახებებს, ასევე დაპირებებს.

    დაპირებები სასურველი მეთოდია, რადგან ის ამცირებს შეცდომის დამუშავების კოდს. გთხოვთ ქვემოთ იხილოთ იგივე მაგალითი, რომელიც დაწერილია გამოძახების და დაპირებების გამოყენებით.

გამოძახებები

// დასახელება/გადამოწმება სახელი/გვარი უკუკავშირის გამოყენებით

ის ('უნდა დააყენოს/გადაამოწმოს სახელი/გვარი Callbacks- ის გამოყენებით', ფუნქცია (შესრულებულია) {driver.setValue ("#fname", "Tony", function (e) {driver.getValue ("#fname", function (err, ე) {(ე).should.be.equal ("ტონი"); console.log ("სახელი:" + e); driver.setValue ("#lname", "Keith", function (e) { driver.getValue ("#lname", ფუნქცია (err, e) {(e).should.be.equal ("Keith"); console.log ("გვარი:" + e); კეთდება ();}});});});});});

დაპირებები

// დააყენეთ/გადაამოწმეთ სახელი/გვარი დაპირებების გამოყენებით

ის ("უნდა დააყენოს/გადაამოწმოს სახელი/გვარი დაპირებების გამოყენებით", ფუნქცია () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). შემდეგ (ფუნქცია (e) {(ე).should.be.equal ("ტონი"); console.log ("სახელი:" + e);}).setValue ("#lname", "Keith").getValue ("#lname"). შემდეგ (ფუნქცია (ე) {(ე). should.be.equal ("Keith"); console.log ("გვარი:" + e);});});

ნაბიჯი 7: მეტი რესურსი

აქ მოცემულია რამდენიმე დამატებითი რესურსი თქვენი მითითებისთვის:

• სადისკუსიო ჯგუფები (Gitter)

  • ვებ დრაივერი IO სადისკუსიო ჯგუფი
  • მოჩას სადისკუსიო ჯგუფი

• სხვა საინტერესო პროექტები

  • სუპერტესტი - HTTP მტკიცება
  • ჩაი - მტკიცებები

ნაბიჯი 8: დასკვნა

გარკვეული დრო გავატარე იმ ტექნოლოგიების შესწავლაში, რომელიც გამოვიყენებ ჩემს პროექტში. თავდაპირველად დავიწყე სელენის ვებ დრაივერი, მაგრამ გადავედი ვებ დრაივერის IO გამოყენებაზე. ვებ დრაივერის IO, როგორც ჩანს, უფრო ადვილი გამოსაყენებელი და ბევრად უფრო ადვილი იყო გაფართოება (ყოველ შემთხვევაში დოკუმენტაციის გახანგრძლივების მიზნით - უკეთესი იყო მრავალჯერადი გამოყენების ბრძანებები).

როდესაც პირველად დავიწყე ტექნოლოგიების დათვალიერება, ძნელი იყო კარგი მაგალითების პოვნა, რომლებიც შეფარდებული იყო ყველაფერთან, რის გაკეთებასაც ვცდილობდი. ეს არის მიზეზი, რის გამოც მინდოდა გამეზიარებინა ეს ინფორმაცია და ცოდნა თქვენთვის.

ტექნოლოგიები ბევრად უკეთესად მუშაობდა ვიდრე ველოდი, თუმცა სწავლის მრუდი იყო ჩართული. მას შემდეგ რაც მივხვდი, თუ როგორ მუშაობდა ყველა კომპონენტი ერთად, მე შევძელი რთული ტესტის სკრიპტების დაწერა ძალიან მოკლე დროში. ყველაზე რთული სკრიპტები იყო JavaScript დაფუძნებული კომპონენტები, როგორიცაა თარიღის ამომრჩევი და მოდალური ამომრჩევლები.

მე არასოდეს მიმითითებია, როგორც JavaScript დეველოპერი და არც მინდოდა, რომ JavaScript- ის ექსპერტი ვყოფილიყავი, მაგრამ ამ ტექნოლოგიების გამოყენებამ ნამდვილად მოტივაცია მომცა გამეუმჯობესებინა ჩემი JS უნარები.

ვიმედოვნებ, რომ ეს სტატია სასარგებლო იქნება და მაგალითები არის ნათელი და ინფორმაციული.

გთხოვთ შემატყობინოთ თუ გაქვთ რაიმე შეკითხვა ან კომენტარი.

Გმადლობთ, ტონი კეიტი