How to use getElementAttribute method in Webdriverio

Best JavaScript code snippet using webdriverio-monorepo

Run Webdriverio automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

elementattribute.js

Source: elementattribute.js Github

copy
1/*global casper*/
2/*jshint strict:false*/
3var x = require('casper').selectXPath;
4
5casper.test.begin('getElementAttribute() tests', 4, function(test) {
6    casper.start('tests/site/elementattribute.html', function() {
7        test.assertEquals(this.getElementAttribute('.testo', 'data-stuff'),
8            'beautiful string', 'Casper.getElementAttribute() works with a CSS selector');
9        test.assertEquals(this.getElementAttribute(x('//div[@class]'), 'data-stuff'),
10            'beautiful string', 'Casper.getElementAttribute() works with a XPath selector');
11    }).then(function() {
12        test.assertEquals(this.getElementsAttribute('.testo', 'data-stuff'),
13            ['beautiful string', 'not as beautiful string'],
14            'Casper.getElementsAttribute() works with a CSS selector');
15        test.assertEquals(this.getElementsAttribute(x('//div[@class]'), 'data-stuff'),
16            ['beautiful string', 'not as beautiful string'],
17            'Casper.getElementsAttribute() works with a XPath selector');
18    }).run(function() {
19        test.done();
20    });
21});
22
Full Screen

Frontend.js

Source: Frontend.js Github

copy
1casper.test.begin('Ama functionality', function suite(test) {
2    
3// Create new question
4casper.start('https://ama-jdorpinghaus.c9.io/questions', function() {
5    test.assertExists('div#newquestion', 'Found question form');
6    this.click('div#newquestion');
7    this.fill('form#newquestionform', {
8        'question': 'CasperTestQuestion'
9    }, true);
10});
11
12idobject = '';
13id = '';
14commentid = '';
15
16// Edit question
17casper.then(function(){
18    x = require('casper').selectXPath;
19    casper.waitUntilVisible(x("//*[text()='CasperTestQuestion']"), function(){
20        test.assertExists(x("//*[text()='CasperTestQuestion']"), 'Created question');
21        idobject = this.getElementAttribute(x("//*[text()='CasperTestQuestion']"), 'id');
22        id = /(\d+)/.exec(idobject);
23        id=id[0];
24        this.click("h1#" + idobject);
25        this.fill('form#questionform_' + id, {
26            'question': 'CasperEDITED'
27        }, false);
28        this.click("input#questioneditsubmit_" + id);
29    });
30});
31
32// Flag/unflag question
33casper.then(function(){
34    casper.waitUntilVisible(x("//*[text()='CasperEDITED']"), function(){
35        test.assertExists(x("//*[text()='CasperEDITED']"), 'Edited question')
36        this.click("div#flagcontainer_" + id);
37        casper.waitUntilVisible("img#flag_" + id, function (){
38            test.assertNotEquals(this.getElementAttribute("img#flag_" + id, 'src').indexOf('red'), -1, 'Changed question flag image to red');
39            this.click("div#flagcontainer_" + id);
40            casper.waitUntilVisible("img#flag_" + id, function(){
41                test.assertEquals(this.getElementAttribute("img#flag_" + id, 'src').indexOf('red'), -1, 'Changed question flag image to gray');
42            });
43        });
44    });
45});
46
47//Vote down on question
48casper.then(function(){
49    casper.waitUntilVisible("p#count_" + id, function(){
50        var count = this.fetchText("p#count_" + id);
51        this.click("img#down_" + id);
52        casper.waitUntilVisible("img#down_" + id, function(){
53            test.assertNotEquals(this.getElementAttribute("img#down_" + id, 'src').indexOf('clicked'), -1, 'Changed downvote image');
54            test.assertEquals(this.getElementAttribute("img#up_" + id, 'src').indexOf('clicked'), -1, "Didn't change upvote image");
55            casper.waitUntilVisible("p#count_" + id, function(){
56                test.assertEquals(Number(this.fetchText("p#count_" + id)), (Number(count) - 1), "Voted down on question");
57            });
58        });
59    });
60});
61
62//Vote up on question
63casper.then(function(){
64    casper.waitUntilVisible("p#count_" + id, function(){
65        var count = this.fetchText("p#count_" + id);
66        this.click("img#up_" + id);
67        casper.waitUntilVisible("img#up_" + id, function(){
68            test.assertNotEquals(this.getElementAttribute("img#up_" + id, 'src').indexOf('clicked'), -1, 'Changed upvote image');
69            test.assertEquals(this.getElementAttribute("img#down_" + id, 'src').indexOf('clicked'), -1, "Didn't change downvote image");
70            casper.waitUntilVisible("p#count_" + id, function(){
71                test.assertEquals(Number(this.fetchText("p#count_" + id)), (Number(count) + 2), "Voted up on question");
72            });
73        });
74    });
75});
76
77//Add comment
78casper.then(function(){
79    this.click("h4#reply_" + id);
80    casper.waitUntilVisible("form#commentform_" + id, function(){
81        this.fill('form#commentform_' + id, {
82            'comment': 'CasperComment'
83        }, false);
84        this.click("input#submit_" + id);
85        casper.waitUntilVisible(x("//*[normalize-space()='CasperComment']"), function(){
86            idobject = this.getElementAttribute(x("//*[normalize-space()='CasperComment']"), 'id');
87            commentid = /(\d+)/.exec(idobject);
88            commentid=commentid[0];
89        });
90    });
91});
92
93//Edit comment
94casper.then(function(){
95    this.click("span#" + idobject);
96    test.assertExists("form#editcommentform_" + id, "Found edit comment form");
97    this.fill('form#editcommentform_' + id, {
98        'comment': 'CasperCommentEDITED'
99        }, false);
100    this.click("input#editsubmit_" + id);
101    this.waitUntilVisible("span#" + idobject, function(){
102        test.assertEquals(this.fetchText("span#" + idobject), 'CasperCommentEDITED', "Edited comment");
103    });
104});
105
106// Flag/unflag comment
107casper.then(function(){
108   casper.waitUntilVisible("img#commentflag_" + commentid, function(){
109      this.click("img#commentflag_" + commentid);
110      casper.waitUntilVisible("img#commentflag_" + commentid, function(){ 
111          test.assertNotEquals(this.getElementAttribute("img#commentflag_" + commentid, 'src').indexOf('red'), -1, 'Changed comment flag image to red');
112          this.click("img#commentflag_" + commentid);
113          casper.waitUntilVisible("img#commentflag_" + commentid, function(){
114              test.assertEquals(this.getElementAttribute("img#commentflag_" + commentid, 'src').indexOf('red'), -1, 'Changed comment flag image to gray');
115          });
116      });
117   });
118});
119
120// Vote down on comment
121casper.then(function(){
122    var count = this.fetchText("span#commentvotecount_" + commentid);
123    this.click("img#commentdown_" + commentid);
124    casper.waitUntilVisible("img#commentdown_" + commentid, function(){
125        test.assertNotEquals(this.getElementAttribute("img#commentdown_" + commentid, 'src').indexOf('clicked'), -1, 'Changed comment downvote image');
126        test.assertEquals(this.getElementAttribute("img#commentup_" + commentid, 'src').indexOf('clicked'), -1, "Didn't change comment upvote image");
127        casper.waitUntilVisible("span#commentvotecount_" + commentid, function(){
128            test.assertEquals(Number(this.fetchText("span#commentvotecount_" + commentid)), (Number(count) - 1), "Voted down on comment");
129        });
130   });
131});
132
133// Vote up on comment
134casper.then(function(){
135    var count = this.fetchText("span#commentvotecount_" + commentid);
136    this.click("img#commentup_" + commentid);
137    casper.waitUntilVisible("img#commentup_" + commentid, function(){
138        test.assertNotEquals(this.getElementAttribute("img#commentup_" + commentid, 'src').indexOf('clicked'), -1, 'Changed comment upvote image');
139        test.assertEquals(this.getElementAttribute("img#commentdown_" + commentid, 'src').indexOf('clicked'), -1, "Didn't change comment downvote image");
140        casper.waitUntilVisible("span#commentvotecount_" + commentid, function(){
141            test.assertEquals(Number(this.fetchText("span#commentvotecount_" + commentid)), (Number(count) + 2), "Voted up on comment");
142        });
143   });
144});
145
146// Mark/unmark/swap comment as answer
147
148casper.then(function(){
149   this.click("img#markanswer_" + commentid);
150   casper.waitUntilVisible("img#markanswer_" + commentid, function(){
151      test.assertNotEquals(this.getElementAttribute("img#markanswer_" + commentid, 'src').indexOf('checked'), -1, 'Marked comment as answer');
152      this.click("img#markanswer_" + commentid);
153      casper.waitUntilVisible("img#markanswer_" + commentid, function(){
154          test.assertEquals(this.getElementAttribute("img#markanswer_" + commentid, 'src').indexOf('checked'), -1, 'Unmarked comment as answer');
155          this.click("h4#reply_" + id);
156          casper.waitUntilVisible("form#commentform_" + id, function(){
157          this.fill('form#commentform_' + id, {
158                'comment': 'CasperComment2'
159            }, false);
160            this.click("input#submit_" + id);
161            casper.waitUntilVisible(x("//*[normalize-space()='CasperComment2']"), function(){
162                idobject2 = this.getElementAttribute(x("//*[normalize-space()='CasperComment2']"), 'id');
163                commentid2 = /(\d+)/.exec(idobject2);
164                commentid2=commentid2[0];
165                this.click("img#markanswer_" + commentid2);
166                casper.waitUntilVisible("img#markanswer_" + commentid2, function(){
167                   test.assertNotEquals(this.getElementAttribute("img#markanswer_" + commentid2, 'src').indexOf('checked'), -1, 'Marked second comment as answer');
168                   test.assertEquals(this.getElementAttribute("img#markanswer_" + commentid, 'src').indexOf('checked'), -1, 'Unmarked first comment as answer');
169                   this.click("img#markanswer_" + commentid2);
170                });
171            });
172        });
173      });
174   });
175});
176
177// Delete comment
178casper.then(function(){
179    this.click("img#delete_" + commentid);
180    casper.waitWhileVisible("img#delete_" + commentid, function(){
181        test.assertDoesntExist("div#comment_" + commentid, 'Deleted comment');
182    });
183    
184// Delete question
185casper.then(function(){
186   this.click("img#deletequestion_" + id);
187   casper.waitWhileVisible("img#deletequestion_" + id, function(){
188      test.assertDoesntExist("h1#questiontitle_" + id, 'Deleted question'); 
189   });
190});
191});
192
193casper.run(function() {
194    test.done();
195});
196
197});
Full Screen

test-amp-bind-video.js

Source: test-amp-bind-video.js Github

copy
1/**
2 * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 *      http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS-IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17describes.endtoend(
18  'amp-bind with <amp-video>',
19  {
20    fixture: 'amp-bind/bind-video.html',
21    environments: 'ampdoc-amp4ads-preset',
22  },
23  async (env) => {
24    let controller;
25
26    beforeEach(async () => {
27      controller = env.controller;
28    });
29
30    it('should support binding to src', async () => {
31      const button = await controller.findElement('#changeVidSrcButton');
32      const video = await controller.findElement('#video');
33
34      await expect(controller.getElementAttribute(video, 'src')).to.equal(
35        'https://www.google.com/unbound.webm'
36      );
37
38      await controller.click(button);
39      await expect(controller.getElementAttribute(video, 'src')).to.equal(
40        'https://www.google.com/bound.webm'
41      );
42    });
43
44    it('should NOT change src when new value is a blocked URL', async () => {
45      const button = await controller.findElement('#disallowedVidUrlButton');
46      const video = await controller.findElement('#video');
47
48      await expect(controller.getElementAttribute(video, 'src')).to.equal(
49        'https://www.google.com/unbound.webm'
50      );
51
52      await controller.click(button);
53      await expect(controller.getElementAttribute(video, 'src')).to.equal(
54        'https://www.google.com/unbound.webm'
55      );
56    });
57
58    it('should NOT change src when new value uses an invalid protocol', async () => {
59      const button = await controller.findElement('#httpVidSrcButton');
60      const video = await controller.findElement('#video');
61
62      await expect(controller.getElementAttribute(video, 'src')).to.equal(
63        'https://www.google.com/unbound.webm'
64      );
65
66      await controller.click(button);
67      // Only HTTPS is allowed
68      await expect(controller.getElementAttribute(video, 'src')).to.equal(
69        'https://www.google.com/unbound.webm'
70      );
71    });
72
73    it('should change alt when the alt attribute binding changes', async () => {
74      const button = await controller.findElement('#changeVidAltButton');
75      const video = await controller.findElement('#video');
76
77      await expect(controller.getElementAttribute(video, 'alt')).to.equal(
78        'unbound'
79      );
80
81      await controller.click(button);
82      await expect(controller.getElementAttribute(video, 'alt')).to.equal(
83        'hello world'
84      );
85    });
86
87    it('should show/hide vid controls when the control binding changes', async () => {
88      const showButton = await controller.findElement('#showVidControlsButton');
89      const hideButton = await controller.findElement('#hideVidControlsButton');
90      const video = await controller.findElement('#video');
91      await expect(controller.getElementAttribute(video, 'controls')).to.be
92        .null;
93
94      await controller.click(showButton);
95      await expect(controller.getElementAttribute(video, 'controls')).to.not.be
96        .null;
97
98      await controller.click(hideButton);
99      await expect(controller.getElementAttribute(video, 'controls')).to.be
100        .null;
101    });
102  }
103);
104
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Webdriverio on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)