How to use getClassName method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

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

helpers.js

Source: helpers.js Github

copy
1import { classToModules, getClassName } from '../helpers/components';
2
3export function getRootClassName({
4  rootElement,
5  cssModule,
6  disabled,
7  organicArrows,
8  className,
9  total,
10  current,
11  infinite,
12  fillParent,
13}) {
14  let classNames = [rootElement];
15  if (organicArrows === true) {
16    classNames.push(`${rootElement}--organic-arrows`);
17  }
18  if (disabled === true) {
19    classNames.push(`${rootElement}--disabled`);
20  }
21  if (fillParent) {
22    classNames.push(`${rootElement}--fill-parent`);
23  }
24  if (infinite === false) {
25    if (current === 0) {
26      classNames.push(`${rootElement}--first`);
27    }
28    if (current === total - 1) {
29      classNames.push(`${rootElement}--last`);
30    }
31  }
32  if (cssModule && cssModule[rootElement]) {
33    classNames = classToModules(classNames, cssModule);
34  }
35  if (className) {
36    classNames.push(...className.split(' '));
37  }
38  return classNames
39    .join(' ')
40    .trim()
41    .replace(/[\s]+/gi, ' ');
42}
43
44export function transformChildren(children) {
45  const media = [];
46  children.forEach(child => {
47    const item = {
48      ...child.props,
49    };
50    if (child.props['data-src']) {
51      item.url = child.props['data-src'];
52    }
53    media.push(item);
54  });
55  return media;
56}
57
58export function setupClassNames(rootElement, cssModule) {
59  return {
60    boxA: getClassName(`${rootElement}__boxA`, cssModule),
61    boxB: getClassName(`${rootElement}__boxB`, cssModule),
62    box: getClassName(`${rootElement}__box`, cssModule),
63    container: getClassName(`${rootElement}__container`, cssModule),
64    wrapper: getClassName(`${rootElement}__wrapper`, cssModule),
65    bar: getClassName(`${rootElement}__bar`, cssModule),
66    barActive: getClassName(`${rootElement}__bar--active`, cssModule),
67    barEnd: getClassName(`${rootElement}__bar--end`, cssModule),
68    content: getClassName(`${rootElement}__content`, cssModule),
69    contentStatic: getClassName(`${rootElement}__content--static`, cssModule),
70    contentMoveLeft: getClassName(
71      `${rootElement}__content--moveLeft`,
72      cssModule
73    ),
74    contentMoveRight: getClassName(
75      `${rootElement}__content--moveRight`,
76      cssModule
77    ),
78    controlsActive: getClassName(`${rootElement}__controls--active`, cssModule),
79    animated: getClassName(`${rootElement}--animated`, cssModule),
80    animatedMobile: getClassName(`${rootElement}--animated-mobile`, cssModule),
81    contentExit: getClassName(`${rootElement}__content--exit`, cssModule),
82    exit: getClassName(`${rootElement}--exit`, cssModule),
83    active: getClassName(`${rootElement}--active`, cssModule),
84    moveLeft: getClassName(`${rootElement}--moveLeft`, cssModule),
85    moveRight: getClassName(`${rootElement}--moveRight`, cssModule),
86    startUp: getClassName(`${rootElement}__startUp`, cssModule),
87    bulletsLoading: getClassName(`${rootElement}__bullets--loading`, cssModule),
88  };
89}
90
Full Screen

FlightsListItem.jsx

Source: FlightsListItem.jsx Github

copy
1import React from 'react';
2import convertFlightDuration from '../../../../utils/flightDurationConverter';
3import convertFlightTime from '../../../../utils/flightTimeConverter';
4
5import BpkText from 'bpk-component-text';
6
7import LongArrowRightIcon from 'bpk-component-icon/sm/long-arrow-right';
8
9import STYLES from './FlightsListItem.scss';
10
11const getClassName = (className) => STYLES[className] || 'UNKNOWN';
12
13const FlightsListItem = ({ flight }) => {
14  const { price, agent, legs } = flight;
15
16  return (
17    <li className={getClassName('FlightsListItem')}>
18      <div className={getClassName('FlightsListItem__legs')}>
19        {legs.map((leg) => {
20          const {
21            id: legId,
22            airline_id,
23            airline_name,
24            arrival_airport,
25            departure_airport,
26            arrival_time,
27            departure_time,
28            duration_mins: duration,
29            stops,
30          } = leg;
31
32          const convertedArrivalTime = convertFlightTime(arrival_time);
33          const convertedDepartureTime = convertFlightTime(departure_time);
34
35          const convertedFlightDuration = convertFlightDuration(duration);
36
37          return (
38            <div
39              className={getClassName('FlightsListItem__legs__leg')}
40              key={legId}
41            >
42              <img
43                src={`https://logos.skyscnr.com/images/airlines/favicon/${airline_id}.png`}
44                alt={`${airline_name}`}
45                className={getClassName(
46                  'FlightsListItem__legs__leg__airline-image'
47                )}
48              />
49              <div
50                className={getClassName(
51                  'FlightsListItem__legs__leg__departure'
52                )}
53              >
54                <BpkText
55                  tagName="p"
56                  className={getClassName(
57                    'FlightsListItem__legs__leg__departure__time'
58                  )}
59                >
60                  {convertedDepartureTime}
61                </BpkText>
62                <BpkText
63                  tagName="p"
64                  className={getClassName(
65                    'FlightsListItem__legs__leg__departure__airport'
66                  )}
67                >
68                  {departure_airport}
69                </BpkText>
70              </div>
71              <BpkText textStyle="base">
72                <LongArrowRightIcon
73                  className={getClassName('FlightsListItem__legs__leg__arrow')}
74                />
75              </BpkText>
76              <div
77                className={getClassName('FlightsListItem__legs__leg__arrival')}
78              >
79                <BpkText
80                  tagName="p"
81                  className={getClassName(
82                    'FlightsListItem__legs__leg__arrival__time'
83                  )}
84                >
85                  {convertedArrivalTime}
86                </BpkText>
87                <BpkText
88                  tagName="p"
89                  className={getClassName(
90                    'FlightsListItem__legs__leg__arrival__airport'
91                  )}
92                >
93                  {arrival_airport}
94                </BpkText>
95              </div>
96              <div
97                className={getClassName(
98                  'FlightsListItem__legs__leg__duration-stops'
99                )}
100              >
101                <BpkText
102                  className={getClassName(
103                    'FlightsListItem__legs__leg__duration-stops__duration'
104                  )}
105                  tagName="p"
106                >
107                  {convertedFlightDuration}
108                </BpkText>
109                <BpkText
110                  className={getClassName(
111                    `FlightsListItem__legs__leg__duration-stops__stops__${
112                      stops === 0 ? 'primary' : 'red'
113                    }`
114                  )}
115                  tagName="p"
116                >
117                  {stops === 0 ? `Direct` : `${stops} Stop`}
118                </BpkText>
119              </div>
120            </div>
121          );
122        })}
123      </div>
124
125      <div className={getClassName('FlightsListItem__select')}>
126        <div className={getClassName('FlightsListItem__select__agent-price')}>
127          <BpkText
128            className={getClassName(
129              'FlightsListItem__select__agent-price__price'
130            )}
131            tagName="p"
132          >
133            {price}
134          </BpkText>
135          <BpkText
136            className={getClassName(
137              'FlightsListItem__select__agent-price__agent'
138            )}
139            tagName="p"
140          >
141            {agent.toLowerCase()}
142          </BpkText>
143        </div>
144        <button className={getClassName('FlightsListItem__select__button')}>
145          Select
146        </button>
147      </div>
148    </li>
149  );
150};
151
152export default FlightsListItem;
153
Full Screen

tst.TstAjax.js

Source: tst.TstAjax.js Github

copy
1/**
2* {@link FM.UtAjax} test class. 
3* 
4* @class FM.TstAjax
5* @extends FM.TstGeneric
6* @param {object} config Test configuration
7*/    
8FM.TstAjax = function() {   
9    this._init.apply(this, arguments); // new poziva _init()
10}
11
12FM.extendClass(FM.TstAjax,FM.TstGeneric); 
13
14// properties
15FM.TstAjax.prototype.objectSubClass = "";
16
17
18// methods
19FM.TstAjax.prototype._init = function(config) {            
20    this._super("_init",config);
21    this.objectSubClass = "TstAjax";
22    // popis testova
23    this.addTest("tGet");
24    this.addTest("tGetErr");
25    this.addTest("tGetJSON");    
26    this.addTest("tPostJSONparams");   
27    this.addTest("tPutJSONparams");   
28    this.addTest("tDeleteJSONparams");
29}
30
31FM.TstAjax.prototype.tGet = function() {
32    this.log("tGet, Ajax GET/TEXT test started.",FM.logLevels.info,this.getClassName());
33    
34    var oAjax = new FM.UtAjax({
35        url: 'http://10.76.150.104:9151/status', 
36        method: 'GET',
37        contentType: 'application/x-www-form-urlencoded',
38        responseFormat: 'TEXT',
39        validResponseCodes: '200',
40        params: {},
41        headers: {},
42        auth: null
43    });
44    
45    var me = this;
46    oAjax.addListener({
47        onAjaxStateStart: function(oAjax,oArgs) {
48            me.log("tGet, onAjaxStateStart event:",FM.logLevels.info,me.getClassName());
49            me.log(oArgs.getAttr("value"),FM.logLevels.info,me.getClassName());
50        },
51        onAjaxStateError: function(oAjax,oErr) {
52            me.log("tGet, onAjaxStateError event:",FM.logLevels.info,me.getClassName());
53            me.log(oErr.getAttr(),FM.logLevels.info,me.getClassName());
54            me.addResult('tGet',false);
55            
56        },
57        onAjaxStateEnd: function(oAjax,oData) {
58            me.log("tGet, onAjaxStateEnd event:",FM.logLevels.info,me.getClassName());
59            me.log(oData.getAttr("value"),FM.logLevels.info,me.getClassName());
60            me.addResult('tGet',true);
61        }        
62    });    
63    
64    oAjax.send({});
65}     
66
67FM.TstAjax.prototype.tGetErr = function() {
68    this.log("tGetErr, Ajax GET (invalid request) test started.",FM.logLevels.info,this.getClassName());
69    
70    var oAjax = new FM.UtAjax({
71        url: 'http://www.index.hr', 
72        method: 'GET',
73        contentType: 'application/x-www-form-urlencoded',
74        responseFormat: 'TEXT',
75        validResponseCodes: '200',
76        params: {},
77        headers: {},
78        auth: null
79    });
80    
81    var me = this;
82    oAjax.addListener({
83        onAjaxStateStart: function(oAjax,oArgs) {
84            me.log("tGetErr, onAjaxStateStart event:",FM.logLevels.info,me.getClassName());
85            me.log(oArgs.getAttr("value"),FM.logLevels.info,me.getClassName());
86        },
87        onAjaxStateError: function(oAjax,oErr) {
88            me.log("tGetErr, onAjaxStateError event:",FM.logLevels.info,me.getClassName());
89            me.log(oErr.getAttr(),FM.logLevels.info,me.getClassName());
90            me.addResult('tGetErr',true);
91            
92        },
93        onAjaxStateEnd: function(oAjax,oData) {
94            me.log("tGetErr, onAjaxStateEnd event:",FM.logLevels.info,me.getClassName());
95            me.log(oData.getAttr("value"),FM.logLevels.info,me.getClassName());
96            me.addResult('tGetErr',false);
97        }        
98    });    
99    
100    oAjax.send({});
101}     
102
103FM.TstAjax.prototype.tGetJSON = function() {
104    this.log("tGetJSON, Ajax Get/JSON test started.",FM.logLevels.info,this.getClassName());
105    
106    var oAjax = new FM.UtAjax({
107        url: 'http://www.hicegosum.com/findme-dev/api/users/563771418', 
108        method: 'GET',
109        contentType: 'application/x-www-form-urlencoded',
110        responseFormat: 'JSON',
111        validResponseCodes: '200',
112        params: {},
113        headers: {},
114        auth: null
115    });
116    
117    var me = this;
118    oAjax.addListener({
119        onAjaxStateStart: function(oAjax,oArgs) {
120            me.log("tGetJSON, onAjaxStateStart event:",FM.logLevels.info,me.getClassName());
121            me.log(oArgs.getAttr("value"),FM.logLevels.info,me.getClassName());
122        },
123        onAjaxStateError: function(oAjax,oErr) {
124            me.log("tGetJSON, onAjaxStateError event:",FM.logLevels.info,me.getClassName());
125            me.log(oErr.getAttr(),FM.logLevels.info,me.getClassName());
126            me.addResult('tGetJSON',false);
127            
128        },
129        onAjaxStateEnd: function(oAjax,oData) {
130            me.log("tGetJSON, onAjaxStateEnd event:",FM.logLevels.info,me.getClassName());
131            me.log(oData.getAttr("value"),FM.logLevels.info,me.getClassName());
132            me.addResult('tGetJSON',true);
133        }        
134    });    
135    
136    oAjax.send({});
137}     
138
139FM.TstAjax.prototype.tPostJSONparams = function() {
140    this.log("tPostJSONparams, Ajax Post/JSON/params test started.",FM.logLevels.info,this.getClassName());
141    
142    var oAjax = new FM.UtAjax({
143        url: 'http://www.hicegosum.com/findme-dev/api/users', 
144        method: 'POST',
145        contentType: 'application/x-www-form-urlencoded',
146        responseFormat: 'JSON',
147        validResponseCodes: '200',
148        params: {ids: true},
149        headers: {},
150        auth: null
151    });
152    
153    var me = this;
154    oAjax.addListener({
155        onAjaxStateStart: function(oAjax,oArgs) {
156            me.log("tPostJSONparams, onAjaxStateStart event:",FM.logLevels.info,me.getClassName());
157            me.log(oArgs.getAttr("value"),FM.logLevels.info,me.getClassName());
158        },
159        onAjaxStateError: function(oAjax,oErr) {
160            me.log("tPostJSONparams, onAjaxStateError event:",FM.logLevels.info,me.getClassName());
161            me.log(oErr.getAttr(),FM.logLevels.info,me.getClassName());
162            me.addResult('tPostJSONparams',false);
163            
164        },
165        onAjaxStateEnd: function(oAjax,oData) {
166            me.log("tPostJSONparams, onAjaxStateEnd event:",FM.logLevels.info,me.getClassName());
167            me.log(oData.getAttr("value"),FM.logLevels.info,me.getClassName());
168            me.addResult('tPostJSONparams',true);
169        }        
170    });    
171    
172    oAjax.send({ids: '563771418'});
173}     
174
175
176FM.TstAjax.prototype.tPutJSONparams = function() {
177    this.log("tPutJSONparams, Ajax Put/JSON/params test started.",FM.logLevels.info,this.getClassName());
178    
179    var oAjax = new FM.UtAjax({
180        url: 'http://www.hicegosum.com/findme-dev/api/users', 
181        method: 'PUT',
182        contentType: 'application/x-www-form-urlencoded',
183        responseFormat: 'JSON',
184        validResponseCodes: '200',
185        params: {ids: true},
186        headers: {},
187        auth: null
188    });
189    
190    var me = this;
191    oAjax.addListener({
192        onAjaxStateStart: function(oAjax,oArgs) {
193            me.log("tPutJSONparams, onAjaxStateStart event:",FM.logLevels.info,me.getClassName());
194            me.log(oArgs.getAttr("value"),FM.logLevels.info,me.getClassName());
195        },
196        onAjaxStateError: function(oAjax,oErr) {
197            me.log("tPutJSONparams, onAjaxStateError event:",FM.logLevels.info,me.getClassName());
198            me.log(oErr.getAttr(),FM.logLevels.info,me.getClassName());
199            me.addResult('tPutJSONparams',false);
200            
201        },
202        onAjaxStateEnd: function(oAjax,oData) {
203            me.log("tPutJSONparams, onAjaxStateEnd event:",FM.logLevels.info,me.getClassName());
204            me.log(oData.getAttr("value"),FM.logLevels.info,me.getClassName());
205            me.addResult('tPutJSONparams',true);
206        }        
207    });    
208    
209    oAjax.send({ids: '563771418'});
210}     
211
212FM.TstAjax.prototype.tDeleteJSONparams = function() {
213    this.log("tDeleteJSONparams, Ajax Delete/JSON/params test started.",FM.logLevels.info,this.getClassName());
214    
215    var oAjax = new FM.UtAjax({
216        url: 'http://www.hicegosum.com/findme-dev/api/users', 
217        method: 'DELETE',
218        contentType: 'application/x-www-form-urlencoded',
219        responseFormat: 'JSON',
220        validResponseCodes: '200',
221        params: {ids: true},
222        headers: {},
223        auth: null
224    });
225    
226    var me = this;
227    oAjax.addListener({
228        onAjaxStateStart: function(oAjax,oArgs) {
229            me.log("tDeleteJSONparams, onAjaxStateStart event:",FM.logLevels.info,me.getClassName());
230            me.log(oArgs.getAttr("value"),FM.logLevels.info,me.getClassName());
231        },
232        onAjaxStateError: function(oAjax,oErr) {
233            me.log("tDeleteJSONparams, onAjaxStateError event:",FM.logLevels.info,me.getClassName());
234            me.log(oErr.getAttr(),FM.logLevels.info,me.getClassName());
235            me.addResult('tDeleteJSONparams',false);
236            
237        },
238        onAjaxStateEnd: function(oAjax,oData) {
239            me.log("tDeleteJSONparams, onAjaxStateEnd event:",FM.logLevels.info,me.getClassName());
240            me.log(oData.getAttr("value"),FM.logLevels.info,me.getClassName());
241            me.addResult('tDeleteJSONparams',true);
242        }        
243    });    
244    
245    oAjax.send({ids: '563771418'});
246}     
247
248// static
249FM.TstAjax.className = "TstAjax";
250FM.TstAjax.fullClassName = 'tst.TstAjax';
251
252
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 Playwright Internal 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)