Web drivrutin IO handledning med hjälp av en levande webbplats och arbetar exempel (5 / 8 steg)

Steg 5: Konkreta exempel

All kod finns tillgänglig på github: Web drivrutin IO Tutorial på github

• Verifiera länk och länktexten i en oordnad lista - "linkTextURL1.js"
  • Oordnad lista har ett id = "mylist" och länken är posten 4.
  • URL-adressen ska vara "http://tlkeith.com/contact.html"

Verifiera kontakta oss länktext
det ("bör innehålla kontakta oss länktexten", funktion () {
returnera drivrutin
.getText("//ul [(länk) {
Console.log (' länken finns: ' + länk);
(länk).should.equal ("kontakta oss");
});
});

Verifiera kontakta oss URL
det ("bör innehålla kontakt oss URL", funktion () {
returnera drivrutin
.getAttribute("//ul ["href") .så (funktion (länk) {
(länk).should.equal ("http://tlkeith.com/contact.html");
Console.log ("URL hittade:" + länk);
});
});

• Verifierar Copyright Text - "Copyright1.js"
  • Upphovsrätten är i footerThis exempel visar 2 olika sätt att lokalisera den copyright texten:
    • av id = "copyright" som elementväljare
    • med hjälp av xpath som elementväljare

Verifiera Copyright text med id som elementväljare
det ("bör innehålla Copyright text", funktion () {
returnera drivrutin
.getText("#copyright").then (funktion (länk) {
Console.log ("Copyright hittade:" + länk);
(länk).should.equal ("Tony Keith - tlkeith.com @ 2015 - alla rättigheter reserverade.");
});
});

Verifiera Copyright text med hjälp av xpath som elementväljare
det ("bör innehålla Copyright text", funktion () {
returnera drivrutin
.getText("//footer/center/p").then(function (länk) {
Console.log ("Copyright hittade:" + länk);
(länk).should.equal ("Tony Keith - tlkeith.com @ 2015 - alla rättigheter reserverade.");
});
});

• Fylla i formulärfält och skicka - "formFillSubmit1.js"
  • Fyll i förnamn, efternamn och lämna in, sedan vänta på resultat.
  • Detta exempel visar 3 metoder för att fylla fältet Förnamn:
    • efter id
    • av xpath från ingång
    • -> input av xpath från form
  • Visar också hur man rensar ett inmatningsfält

Ange det första namnet med id till: Tony
det ("ska in förnamn till Tony", funktion () {
återgå driver.setValue ("#fname", "Tony")
.getValue("#fname").then (funktion (e) {
(e).should.be.equal("Tony");
Console.log ("förnamn:" + e);
});
});

Klart det första namnet med id
('bör klart förnamn', funktion () {
återgå driver.clearElement("#fname")
.getValue("#fname").then (funktion (e) {
(e).should.be.equal("");
Console.log ("förnamn:" + e);
});
});

Ange det första namnet med hjälp av xpath från ingång till: Tony
det ("ska in förnamn till Tony", funktion () {
återgå driver.setValue ("//input ["Tony")
.getValue("//input [funktion (e) {
(e).should.be.equal("Tony");
Console.log ("förnamn:" + e);
});
});

Klart det första namnet med hjälp av xpath från ingång
('bör klart förnamn', funktion () {
återgå driver.clearElement ("//input [
.getValue("//input [funktion (e) {
(e).should.be.equal("");
Console.log ("förnamn:" + e);
});
});

Ange det första namnet med hjälp av xpath från formuläret till: Tony
det ("ska in förnamn till Tony", funktion () {
återgå driver.setValue ("//form ["Tony")
.getValue("//form [funktion (e) {
(e).should.be.equal("Tony");
Console.log ("förnamn:" + e);
});
});

Ange efternamnet med id till: Keith
det ("ska in efternamn till Keith", funktion () {
återgå driver.setValue ("#lname", "Keith")
.getValue("#lname").then (funktion (e) {
(e).should.be.equal("Keith");
Console.log ("efternamn:" + e);
});
});

Skicka formuläret och vänta för sökresultat
det ('bör skicka formuläret och vänta på resultat, funktion () {
återgå driver.submitForm("#search-form").then (function(e) {
Console.log ("skicka formulär');
})
.waitForVisible("#search-results", 10000).then (funktion (e) {
Console.log ("Sök Resultat funna');
});
});

• Klicka på Visa/Dölj-knappen och kontrollera Text - "showHideVerify1.js"
  • Texten är i ett Visa/Dölj element. Knappen styr staten.
  • Detta exempel visar:
    • Klicka på knappen expandera
    • Vänta för elementet som ska visas (utökad)
    • Kontrollera text (kopia däck)

Klicka på "Mer Info" knappen och kontrollera text i utökad element
det ('bör Klicka på informationsknappen mer och kontrollera text, funktion () {
returnera drivrutin
.Click("#moreinfo").then (funktion () {
Console.log ("klickade på More Info-knappen');
})
.waitForVisible ("#collapseExample", 5000)
.getText("//div [(funktion (e) {
Console.log ("Text: ' + e);
e.should.be.equal ("allt bra gå här!");
});
});

• Validera formulär fält fel - "formFieldValidation.js"
  • Använd testskript för att kontrollera rätt felmeddelanden produceras.
  • Detta exempel visar:
    • Kontrollera text felmeddelanden och verifiera plats (oordnad lista position).

det ("bör innehålla 5 fel: första/sista/adress/stad/stat", fungera () {
returnera drivrutin
.getText("//ul [alert-fara '] /li [1]") .så (funktion (e) {
Console.log ("fel hittades: ' + e);
e.should.be.equal ("Ange förnamn');
})
.getText("//ul [alert-fara '] /li [2]") .så (funktion (e) {
Console.log ("fel hittades: ' + e);
e.should.be.equal ("Ange efternamn');
})
.getText("//ul [alert-fara '] /li [3]") .så (funktion (e) {
Console.log ("fel hittades: ' + e);
e.should.be.equal ("Skriv in adress');
})
.getText("//ul [alert-fara '] /li [4]") .så (funktion (e) {
Console.log ("fel hittades: ' + e);
e.should.be.equal ("Skriv in stad');
})
.getText("//ul [alert-fara '] /li [5]") .så (funktion (e) {
Console.log ("fel hittades: ' + e);
e.should.be.equal ("Skriv in staten');
});
});

• Looping Data för att verifiera URL länk/Text/sida - "LoopDataExample1.js"
  • Detta exempel visar: Använd en mängd JSON data som lagras på länken och namn, sedan upprepa
    • Kontrollera varje URL text och länk
    • Klicka på länken och ladda sida

Länka data - länk och text
var linkArray = [
{"länk": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/tutorial1.js", "namn": "tutorial1.js"},
{"länk": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/linkTextURL1.js", "namn": "linkTextURL1.js"},
{"länk": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/copyright1.js", "namn": "copyright1.js"},
{"länk": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js", "namn": "formFillSubmit1.js"},
{"länk": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js", "namn": "showHideVerify1.js"},
{"länk": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dynamicBrowser.js", "namn": "dynamicBrowser.js"},
{"länk": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/callbackPromise.js", "namn": "callbackPromise.js"},
{"länk": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js", "namn": "debugExample1.js"},
{"länk": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js", "namn": "formFieldValidation.js"},
{"länk": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js", "namn": "commonLib.js"},
{"länk": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dataLoopExample1.js", "namn": "dataLoopExample1.js"}
];
...
loopa igenom alla linkArray
linkArray.forEach(function(d) {
det ("bör innehålla text/länk sedan goto page -" + d.name, function() {
returnera drivrutin
se till att du är på startsidan
URL ("http://www.tlkeith.com/WebDriverIOTutorialTest.html")
.getTitle () .så (funktion (titel) {
verifiera titel
(titel).should.be.equal ("Web drivrutin IO - handledning provsida");
})
hitta Webbadressen
.getAttribute('a=' + d.name, "href").then (funktion (länk) {
(link).should.equal(d.link);
Console.log ("URL hittade:" + d.link);
})
gå till URL-sida och kontrollera det finns
.Click ("a =" + d.name)
.waitForVisible("#js-repo-pjax-container", 10000).then (funktion () {
Console.log ("Github sida Funna');
});
});
});

• Looping statiska Data att befolka formulärfälten - "loopDataExample2.js"
  • Detta exempel visar: Använd en mängd JSON data att spara första/sista namn
    • Loopa igenom uppgifterna att fylla i formulärfält och sedan skicka formuläret
    • Vänta på resultatsidan
    • Kontrollera första / sista namn på resultatsidan

uppgifter array - förnamn och efternamn < br > var dataArray = [
{"förnamn": "Tony", "lastName": "Keith"},
{"förnamn": "John", "lastName": "Doe"},
{"förnamn": "Jane", "lastName": "Doe"},
{"förnamn": "Don", "lastName": "Johnson"}
];

...

loopa igenom alla dataArray < br > dataArray.forEach(function(d) {
det ('bör fylla i fält, uppge sida', function() {
returnera drivrutin
se till att du är på startsidan
URL ("http://www.tlkeith.com/WebDriverIOTutorialTest.html")
.getTitle () .så (funktion (titel) {
verifiera titel
(titel).should.be.equal ("Web drivrutin IO - handledning provsida");
})
.setValue ("#fname", d.firstName)
.getValue("#fname").then (funktion (e) {
(e).should.be.equal(d.firstName);
Console.log ("förnamn:" + e);
})
.setValue ("#lname", d.lastName)
.getValue("#lname").then (funktion (e) {
(e).should.be.equal(d.lastName);
Console.log ("efternamn:" + e);
})
.submitForm("#search-form").then (function() {
Console.log ("skicka formulär');
})
.waitForVisible("#search-results", 10000).then (funktion () {
Console.log ("resultatet sida Funna');
})
.getText("//h1").then(function (länk) {
Console.log ("texten finns: ' + länk);
(länk).should.equal ("Välkommen" + d.firstName + "" + d.lastName + ".");
});
});
});

• Validera CSS-egenskaper - "cssValidation1.js"
  • Detta exempel visar hur du:
    • Verifiera följande CSS-egenskaper:
      • färg
      • stoppning (topp, botten, höger, vänster)
      • bakgrundsfärgen

det ("bör innehålla rätt färg på feltext", fungera () {< br > retur drivrutin
.getCssProperty("//ul [alert-fara '] /li [1]", "färg") .så (funktion (resultat) {
Console.log ("färg hittade:" + result.parsed.hex + "eller" + result.value);
(result.parsed.hex).should.be.equal('#a94442');
});
});

det ("bör innehålla korrekt stoppning i cell", funktion () {
returnera drivrutin
stoppning: top högra nedre vänster
.getCssProperty("//table ["padding-top") .så (funktion (resultat) {
Console.log ("padding-top hittade:" + result.value);
(result.value).should.be.equal('10px');
})
.getCssProperty("//table ["padding-botten") .så (funktion (resultat) {
Console.log ("padding-botten hittade:" + result.value);
(result.value).should.be.equal('10px');
})
.getCssProperty("//table ["padding-right") .så (funktion (resultat) {
Console.log ("padding-höger hittade:" + result.value);
(result.value).should.be.equal('5px');
})
.getCssProperty("//table ["padding-left") .så (funktion (resultat) {
Console.log ("stoppning vänster hittade:" + result.value);
(result.value).should.be.equal('5px');
});
});

det ("bör innehålla korrekta bakgrundsfärg i tabell huvudet", funktion () {
returnera drivrutin
.getCssProperty("//table ["bakgrundsfärg") .så (funktion (resultat) {
Console.log ("bakgrundsfärg hittade:" + result.parsed.hex);
(result.parsed.hex).should.be.equal('#eeeeee');
});
});