How to use selectOption 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.

GroupExample.js

Source: GroupExample.js Github

copy
1import { Component } from 'vidom';
2import { Select, SelectOptionGroup, SelectOption } from 'vidom-components';
3
4export default class GroupExample extends Component {
5    onInit() {
6        this.setState({ value : '2' });
7    }
8
9    onRender() {
10        return (
11            <Select
12                theme="islands"
13                size="m"
14                value={ this.state.value }
15                onValueChange={ value => { this.setState({ value }) } }
16            >
17                <SelectOptionGroup title="group-1">
18                    <SelectOption value="1">option-1</SelectOption>
19                    <SelectOption value="2">option-2</SelectOption>
20                    <SelectOption value="3">option-3</SelectOption>
21                    <SelectOption value="4">option-4</SelectOption>
22                </SelectOptionGroup>
23                <SelectOptionGroup title="group-2">
24                    <SelectOption value="5">option-5</SelectOption>
25                    <SelectOption value="6">option-6</SelectOption>
26                    <SelectOption value="7">option-7</SelectOption>
27                    <SelectOption value="8">option-8</SelectOption>
28                </SelectOptionGroup>
29            </Select>
30        );
31    }
32}
33
Full Screen

FilterOptionsForm.js

Source: FilterOptionsForm.js Github

copy
1import React, { useState, useEffect, useContext, useRef } from "react";
2import { Form, Select } from "formik-antd";
3import { Formik } from "formik";
4import { Button, Spin } from "antd";
5import { useTranslation } from "react-i18next";
6import _ from "lodash";
7import * as Yup from "yup";
8import { petFilters } from "../../api/pets";
9import ConstantsContext from "../../constants/constantsContext";
10import FilterAndSearchContext from "../../constants/filterAndSearchContext";
11
12const FormItem = Form.Item;
13
14const SelectOption = Select.Option;
15
16const initialValues = {
17    species: -1,
18    breed: -1,
19    priceRange: -1,
20    gender: -1,
21    province: -1,
22    department: -1,
23    searchCriteria: -1,
24    searchOrder: "asc",
25};
26
27const FilterOptionsForm = () => {
28    const formRef = useRef(null);
29
30    const { filters, onSubmitFilters, fetching, clearFilters } = useContext(
31        FilterAndSearchContext
32    );
33
34    const [fetchingFilters, setFetchingFilters] = useState(false);
35
36    const { species, breeds, provinces, departments } = useContext(
37        ConstantsContext
38    );
39
40    const { t } = useTranslation("home");
41
42    const [availableFilters, setAvailableFilters] = useState({
43        speciesList: null,
44        breedList: null,
45        departmentList: null,
46        provinceList: null,
47        genderList: null,
48        rangeList: null,
49    });
50
51    const fetchFilters = async (values) => {
52        try {
53            setFetchingFilters(true);
54            const newFilters = await petFilters(
55                Object.assign({}, { find: filters.find }, values)
56            );
57
58            setAvailableFilters(newFilters);
59        } catch (e) {
60            //TODO: conn error
61        }
62        setFetchingFilters(false);
63    };
64
65    useEffect(() => {
66        fetchFilters(filters);
67    }, []);
68
69    useEffect(() => {
70        if (_.isNil(filters)) return;
71
72        const { setValues } = formRef.current;
73
74        setValues(Object.assign({}, initialValues, filters));
75    }, [filters]);
76
77    const {
78        speciesList,
79        breedList,
80        departmentList,
81        provinceList,
82        genderList,
83        rangeList,
84    } = availableFilters;
85
86    const _onSubmit = async (values) => {
87        const filledFilters = _.pickBy(values, (value) => value !== -1);
88
89        onSubmitFilters(filledFilters);
90    };
91
92    return (
93        <Formik
94            innerRef={formRef}
95            validationSchema={Yup.object().shape({
96                species: Yup.string(),
97                breed: Yup.string(),
98                priceRange: Yup.string(),
99                gender: Yup.string(),
100                province: Yup.string(),
101                department: Yup.string(),
102                searchCriteria: Yup.string(),
103                searchOrder: Yup.string(),
104            })}
105            onSubmit={_onSubmit}
106            initialValues={Object.assign({}, initialValues, filters)}
107        >
108            {({ setFieldValue, values, handleSubmit, setValues }) => {
109                const breedsToShow =
110                    species &&
111                    breeds &&
112                    values.species &&
113                    values.species !== -1 &&
114                    _.intersection(
115                        species[values.species].breedIds,
116                        breedList && breedList.map(({ id }) => id)
117                    ).map((id) => ({ id, name: breeds[id].name }));
118
119                const departmentsToShow =
120                    provinces &&
121                    departments &&
122                    values.province &&
123                    values.province !== -1 &&
124                    _.intersection(
125                        provinces[values.province].departmentIds,
126                        departmentList && departmentList.map(({ id }) => id)
127                    ).map((id) => ({ id, name: departments[id].name }));
128
129                return (
130                    <Form layout={"vertical"}>
131                        <div className={"form-content"}>
132                            <FormItem
133                                name={"species"}
134                                label={t("filterForm.labels.species")}
135                            >
136                                {fetchingFilters ? (
137                                    <Spin />
138                                ) : (
139                                    speciesList && (
140                                        <Select
141                                            name={"species"}
142                                            disabled={_.isNil(speciesList)}
143                                            onChange={() =>
144                                                setFieldValue("breed", -1)
145                                            }
146                                        >
147                                            <SelectOption value={-1}>
148                                                {t("filterForm.labels.any")}
149                                            </SelectOption>
150                                            {speciesList.map(({ id, name }) => {
151                                                return (
152                                                    <SelectOption
153                                                        key={id}
154                                                        value={"" + id}
155                                                    >
156                                                        {name}
157                                                    </SelectOption>
158                                                );
159                                            })}
160                                        </Select>
161                                    )
162                                )}
163                            </FormItem>
164
165                            <FormItem
166                                name={"breed"}
167                                label={t("filterForm.labels.breed")}
168                            >
169                                {fetchingFilters || _.isNil(species) ? (
170                                    <Spin />
171                                ) : (
172                                    <Select
173                                        name={"breed"}
174                                        disabled={
175                                            _.isNil(breedList) ||
176                                            values.species === -1
177                                        }
178                                    >
179                                        <SelectOption value={-1}>
180                                            {t("filterForm.labels.any")}
181                                        </SelectOption>
182                                        {breedsToShow &&
183                                            breedsToShow.map(({ id, name }) => {
184                                                return (
185                                                    <SelectOption
186                                                        key={id}
187                                                        value={"" + id}
188                                                    >
189                                                        {name}
190                                                    </SelectOption>
191                                                );
192                                            })}
193                                    </Select>
194                                )}
195                            </FormItem>
196
197                            <FormItem
198                                name={"priceRange"}
199                                label={t("filterForm.labels.price")}
200                            >
201                                {fetchingFilters ? (
202                                    <Spin />
203                                ) : (
204                                    <Select
205                                        name={"priceRange"}
206                                        disabled={_.isNil(rangeList)}
207                                    >
208                                        <SelectOption value={-1}>
209                                            {t("filterForm.labels.any")}
210                                        </SelectOption>
211                                        {rangeList &&
212                                            Object.entries(rangeList).map(
213                                                ([id, { min, max }]) => {
214                                                    if (min === 0 && max === 0)
215                                                        return (
216                                                            <SelectOption
217                                                                key={id}
218                                                                value={"" + id}
219                                                            >
220                                                                {t(
221                                                                    "filterForm.labels.priceRange.free"
222                                                                )}
223                                                            </SelectOption>
224                                                        );
225
226                                                    if (max === -1)
227                                                        return (
228                                                            <SelectOption
229                                                                key={id}
230                                                                value={"" + id}
231                                                            >
232                                                                {t(
233                                                                    "filterForm.labels.priceRange.max",
234                                                                    { min }
235                                                                )}
236                                                            </SelectOption>
237                                                        );
238
239                                                    return (
240                                                        <SelectOption
241                                                            key={id}
242                                                            value={"" + id}
243                                                        >
244                                                            {t(
245                                                                "filterForm.labels.priceRange.range",
246                                                                { min, max }
247                                                            )}
248                                                        </SelectOption>
249                                                    );
250                                                }
251                                            )}
252                                    </Select>
253                                )}
254                            </FormItem>
255
256                            <FormItem
257                                name={"gender"}
258                                label={t("filterForm.labels.sex")}
259                            >
260                                {fetchingFilters ? (
261                                    <Spin />
262                                ) : (
263                                    <Select
264                                        name={"gender"}
265                                        disabled={_.isNil(genderList)}
266                                    >
267                                        <SelectOption value={-1}>
268                                            {t("filterForm.labels.any")}
269                                        </SelectOption>
270                                        {genderList &&
271                                            genderList.map((name) => {
272                                                return (
273                                                    <SelectOption
274                                                        key={name}
275                                                        value={name}
276                                                    >
277                                                        {t("sex." + name)}
278                                                    </SelectOption>
279                                                );
280                                            })}
281                                    </Select>
282                                )}
283                            </FormItem>
284
285                            <FormItem
286                                name={"province"}
287                                label={t("filterForm.labels.state")}
288                                onChange={() => setFieldValue("department", -1)}
289                            >
290                                {fetchingFilters ? (
291                                    <Spin />
292                                ) : (
293                                    <Select
294                                        name={"province"}
295                                        disabled={_.isNil(provinceList)}
296                                    >
297                                        <SelectOption value={-1}>
298                                            {t("filterForm.labels.any")}
299                                        </SelectOption>
300                                        {provinceList &&
301                                            provinceList.map(({ id, name }) => {
302                                                return (
303                                                    <SelectOption
304                                                        key={id}
305                                                        value={"" + id}
306                                                    >
307                                                        {name}
308                                                    </SelectOption>
309                                                );
310                                            })}
311                                    </Select>
312                                )}
313                            </FormItem>
314
315                            <FormItem
316                                name={"department"}
317                                label={t("filterForm.labels.department")}
318                            >
319                                {fetchingFilters || _.isNil(provinces) ? (
320                                    <Spin />
321                                ) : (
322                                    <Select
323                                        name={"department"}
324                                        disabled={
325                                            _.isNil(departmentList) ||
326                                            values.province === -1
327                                        }
328                                    >
329                                        <SelectOption value={-1}>
330                                            {t("filterForm.labels.any")}
331                                        </SelectOption>
332                                        {departmentsToShow &&
333                                            departmentsToShow.map(
334                                                ({ id, name }) => {
335                                                    return (
336                                                        <SelectOption
337                                                            key={id}
338                                                            value={"" + id}
339                                                        >
340                                                            {name}
341                                                        </SelectOption>
342                                                    );
343                                                }
344                                            )}
345                                    </Select>
346                                )}
347                            </FormItem>
348
349                            <FormItem
350                                name={"searchCriteria"}
351                                label={t("filterForm.labels.criteria")}
352                            >
353                                {fetchingFilters ? (
354                                    <Spin />
355                                ) : (
356                                    <Select name={"searchCriteria"}>
357                                        <SelectOption value={-1}>
358                                            {t("filterForm.labels.any")}
359                                        </SelectOption>
360                                        <SelectOption value={"uploadDate"}>
361                                            {t(
362                                                "filterForm.criteria.uploadDate"
363                                            )}
364                                        </SelectOption>
365                                        <SelectOption value={"gender"}>
366                                            {t("filterForm.criteria.gender")}
367                                        </SelectOption>
368                                        <SelectOption value={"species"}>
369                                            {t("filterForm.criteria.species")}
370                                        </SelectOption>
371                                        <SelectOption value={"breed"}>
372                                            {t("filterForm.criteria.breed")}
373                                        </SelectOption>
374                                        <SelectOption value={"price"}>
375                                            {t("filterForm.criteria.price")}
376                                        </SelectOption>
377                                    </Select>
378                                )}
379                            </FormItem>
380
381                            <FormItem
382                                name={"searchOrder"}
383                                label={t("filterForm.labels.order")}
384                            >
385                                {fetchingFilters ? (
386                                    <Spin />
387                                ) : (
388                                    <Select
389                                        name={"searchOrder"}
390                                        disabled={values.searchCriteria === -1}
391                                    >
392                                        <SelectOption value={"asc"}>
393                                            {t("filterForm.asc")}
394                                        </SelectOption>
395                                        <SelectOption value={"desc"}>
396                                            {t("filterForm.desc")}
397                                        </SelectOption>
398                                    </Select>
399                                )}
400                            </FormItem>
401                        </div>
402
403                        <div className={"form-buttons"}>
404                            <Button
405                                type={"primary"}
406                                htmlType={"submit"}
407                                loading={fetching || fetchingFilters}
408                            >
409                                {t("filterForm.filterButtons.filter")}
410                            </Button>
411
412                            <Button
413                                type={"secondary"}
414                                onClick={() => {
415                                    setValues(initialValues);
416                                    clearFilters();
417                                }}
418                                loading={fetching || fetchingFilters}
419                            >
420                                {t("filterForm.filterButtons.clear")}
421                            </Button>
422                        </div>
423                    </Form>
424                );
425            }}
426        </Formik>
427    );
428};
429
430export default FilterOptionsForm;
431
Full Screen

DisabledExample.js

Source: DisabledExample.js Github

copy
1import { Component } from 'vidom';
2import { Select, SelectOption } from 'vidom-components';
3
4export default class DisabledExample extends Component {
5    onRender() {
6        return (
7            <Select
8                theme="islands"
9                size="m"
10                value="2"
11                disabled
12            >
13                <SelectOption value="1">option-1</SelectOption>
14                <SelectOption value="2">option-2</SelectOption>
15                <SelectOption value="3">option-3</SelectOption>
16                <SelectOption value="4">option-4</SelectOption>
17            </Select>
18        );
19    }
20}
21
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)