Best JavaScript code snippet using playwright-internal
toggleOptionsChecklistControlSpec.js
...164 });165 it("checkboxes in row titles render correctly", function() {166 expect($testPage.find('.toc-row-title > .control.form-group > .checkbox > input:checkbox').length).toBe(3);167 expect($testPage.find('.toc-row-title > .control.form-group > .checkbox > label.sr-only').length).toBe(3);168 expect($testPage.find('input:checkbox')[0]).toBeChecked();169 expect($testPage.find('input:checkbox')[1]).not.toBeChecked();170 expect($testPage.find('input:checkbox')[2]).not.toBeChecked();171 });172 });173 describe("radio buttons and checkbox function", function() {174 it("radio buttons correct initial value", function() {175 //First Row176 expect($testPage.find('input:radio')[0]).toBeChecked();177 expect($testPage.find('input:radio')[1]).not.toBeChecked();178 expect($testPage.find('input:radio')[2]).toBeChecked();179 expect($testPage.find('input:radio')[3]).not.toBeChecked();180 expect($testPage.find('input:radio')[4]).toBeChecked();181 expect($testPage.find('input:radio')[5]).not.toBeChecked();182 expect($testPage.find('input:radio')[6]).not.toBeChecked();183 expect($testPage.find('input:radio')[7]).not.toBeChecked();184 expect($testPage.find('input:radio')[8]).not.toBeChecked();185 expect($testPage.find('input:radio')[9]).not.toBeChecked();186 expect($testPage.find('input:radio')[10]).not.toBeChecked();187 expect($testPage.find('input:radio')[11]).not.toBeChecked();188 //Second Row189 expect($testPage.find('input:radio')[12]).not.toBeChecked();190 expect($testPage.find('input:radio')[13]).toBeChecked();191 expect($testPage.find('input:radio')[14]).not.toBeChecked();192 expect($testPage.find('input:radio')[15]).not.toBeChecked();193 expect($testPage.find('input:radio')[16]).not.toBeChecked();194 expect($testPage.find('input:radio')[17]).not.toBeChecked();195 //Third Row196 expect($testPage.find('input:radio')[18]).not.toBeChecked();197 expect($testPage.find('input:radio')[19]).not.toBeChecked();198 expect($testPage.find('input:radio')[20]).not.toBeChecked();199 expect($testPage.find('input:radio')[21]).not.toBeChecked();200 });201 it("radio buttons change when header button clicked", function() {202 expect($testPage.find('.AO-radio-group:eq(0) input:radio:checked').val()).toBe("yes");203 expect($testPage.find('.AO-radio-group:eq(1) input:radio:checked').val()).toBe("no");204 $testPage.find('a.btn.AO').click();205 expect($testPage.find('.AO-radio-group:eq(0) input:radio:checked').val()).toBe("yes");206 expect($testPage.find('.AO-radio-group:eq(1) input:radio:checked').val()).toBe("no");207 $testPage.find('a.btn.AO').click();208 expect($testPage.find('.AO-radio-group:eq(0) input:radio:checked').val()).toBe("no");209 expect($testPage.find('.AO-radio-group:eq(1) input:radio:checked').val()).toBe("no");210 $testPage.find('a.btn.AO').click();211 expect($testPage.find('.AO-radio-group:eq(0) input:radio:checked').val()).toBe("yes");212 expect($testPage.find('.AO-radio-group:eq(1) input:radio:checked').val()).toBe("no");213 //testing fifth column header a.btn in same it to make sure it is unaffected by first column header button214 expect($testPage.find('.MST-radio-group:eq(0) input:radio:checked').val()).toBe(undefined);215 expect($testPage.find('.MST-radio-group:eq(1) input:radio:checked').val()).toBe(undefined);216 $testPage.find('a.btn.MST').click();217 expect($testPage.find('.MST-radio-group:eq(0) input:radio:checked').val()).toBe("yes");218 expect($testPage.find('.MST-radio-group:eq(1) input:radio:checked').val()).toBe(undefined);219 $testPage.find('a.btn.MST').click();220 expect($testPage.find('.MST-radio-group:eq(0) input:radio:checked').val()).toBe("no");221 expect($testPage.find('.MST-radio-group:eq(1) input:radio:checked').val()).toBe(undefined);222 $testPage.find('a.btn.MST').click();223 expect($testPage.find('.MST-radio-group:eq(0) input:radio:checked').val()).toBe("yes");224 expect($testPage.find('.MST-radio-group:eq(1) input:radio:checked').val()).toBe(undefined);225 });226 it("radio buttons work when clicked individually", function() {227 expect($testPage.find('.AO-radio-group:eq(0) input:radio:checked').val()).toBe("yes");228 $testPage.find('#row-0-AO-yes').click();229 expect($testPage.find('.AO-radio-group:eq(0) input:radio:checked').val()).toBe("yes");230 $testPage.find('#row-0-AO-no').click();231 expect($testPage.find('.AO-radio-group:eq(0) input:radio:checked').val()).toBe("no");232 //DISABLED radio buttons233 expect($testPage.find('.AO-radio-group:eq(2) input:radio:checked').val()).toBe(undefined);234 $testPage.find('#row-2-AO-yes').click();235 expect($testPage.find('.AO-radio-group:eq(2) input:radio:checked').val()).toBe(undefined);236 });237 it("checkboxes work", function() {238 //frirst checkbox239 expect($testPage.find('input:checkbox#row01')).toBeChecked();240 $testPage.find('input:checkbox#row01').click();241 expect($testPage.find('input:checkbox#row01')).not.toBeChecked();242 $testPage.find('input:checkbox#row01').click();243 expect($testPage.find('input:checkbox#row01')).toBeChecked();244 //second textbox245 expect($testPage.find('input:checkbox#row02')).not.toBeChecked();246 $testPage.find('input:checkbox#row02').click();247 expect($testPage.find('input:checkbox#row02')).toBeChecked();248 $testPage.find('input:checkbox#row02').click();249 expect($testPage.find('input:checkbox#row02')).not.toBeChecked();250 //third checkbox DISABLED251 expect($testPage.find('input:checkbox#row03')).not.toBeChecked();252 $testPage.find('input:checkbox#row03').click();253 expect($testPage.find('input:checkbox#row03')).toBeChecked();254 $testPage.find('input:checkbox#row03').click();255 expect($testPage.find('input:checkbox#row03')).not.toBeChecked();256 });257 });258 describe('TOC events work correctly', function() {259 it('and the control handles header:click event properly', function() {260 expect($testPage.find('.AO-radio-group:eq(0) input:radio:checked').val()).toBe("yes");261 expect($testPage.find('.AO-radio-group:eq(1) input:radio:checked').val()).toBe("no");262 $('.toc').trigger('control:header:click', 'AO');263 expect($testPage.find('.AO-radio-group:eq(0) input:radio:checked').val()).toBe("yes");264 expect($testPage.find('.AO-radio-group:eq(1) input:radio:checked').val()).toBe("no");265 });266 it('and the control handles header:add event properly', function() {267 expect($testPage.find('.toc-table-header-btn').length).toBe(6);268 $('.toc').trigger('control:header:add', {269 id: 'NT',...
Field.test.js
Source: Field.test.js
...113 it('<Field type="checkbox" />', () => {114 render(<Field name="agree" type="checkbox" />)115 const input = screen.getByRole('checkbox')116 expect(input).toBeInTheDocument()117 expect(input).not.toBeChecked()118 userEvent.click(input)119 expect(input).toBeChecked()120 })121 it('<Field component={FormControlLabel} control={<Checkbox />} label="Label" />', () => {122 render(123 <Field component={FormControlLabel} control={<Checkbox />} label="Label" name="agree" />,124 )125 const input = screen.getByRole('checkbox')126 expect(input).toBeInTheDocument()127 expect(input).not.toBeChecked()128 userEvent.click(input)129 expect(input).toBeChecked()130 })131 })132 describe('should render with `checked` when of type radio', () => {133 it('<Field type="radio" />', () => {134 render(135 <React.Fragment>136 <Field name="fruit" value="Apple" type="radio" />137 <Field name="fruit" value="Banana" type="radio" />138 </React.Fragment>,139 )140 const inputs = screen.getAllByRole('radio')141 expect(inputs).toHaveLength(2)142 expect(inputs[0]).toBeChecked()143 expect(inputs[1]).not.toBeChecked()144 userEvent.click(inputs[1])145 expect(inputs[0]).not.toBeChecked()146 expect(inputs[1]).toBeChecked()147 })148 it('<Field component={FormControlLabel} control={<Radio />} label="Label" />', () => {149 render(150 <React.Fragment>151 <Field152 component={FormControlLabel}153 control={<Radio />}154 label="Label"155 name="fruit"156 value="Apple"157 />158 ,159 <Field160 component={FormControlLabel}161 control={<Radio />}162 label="Label"163 name="fruit"164 value="Banana"165 />166 ,167 </React.Fragment>,168 )169 const inputs = screen.getAllByRole('radio')170 expect(inputs).toHaveLength(2)171 expect(inputs[0]).toBeChecked()172 expect(inputs[1]).not.toBeChecked()173 userEvent.click(inputs[1])174 expect(inputs[0]).not.toBeChecked()175 expect(inputs[1]).toBeChecked()176 })177 })178 describe('should handle multiple checkboxes when initial value is of type array', () => {179 it('<Field type="checkbox" />', () => {180 render(181 <React.Fragment>182 <Field name="fruits" value="Apple" type="checkbox" />183 <Field name="fruits" value="Banana" type="checkbox" />184 </React.Fragment>,185 )186 const inputs = screen.getAllByRole('checkbox')187 expect(inputs).toHaveLength(2)188 expect(inputs[0]).toBeChecked()189 expect(inputs[1]).not.toBeChecked()190 userEvent.click(inputs[1])191 expect(inputs[0]).toBeChecked()192 expect(inputs[1]).toBeChecked()193 })194 it('<Field component={FormControlLabel} control={<Checkbox />} label="Label" />', () => {195 render(196 <React.Fragment>197 <Field198 component={FormControlLabel}199 control={<Checkbox />}200 label="Label"201 name="fruits"202 value="Apple"203 />204 <Field205 component={FormControlLabel}206 control={<Checkbox />}207 label="Label"208 name="fruits"209 value="Banana"210 />211 </React.Fragment>,212 )213 const inputs = screen.getAllByRole('checkbox')214 expect(inputs).toHaveLength(2)215 expect(inputs[0]).toBeChecked()216 expect(inputs[1]).not.toBeChecked()217 userEvent.click(inputs[1])218 expect(inputs[0]).toBeChecked()219 expect(inputs[1]).toBeChecked()220 })221 })222 it('should pass field props & meta when using render props', () => {223 let injectedProps224 render(225 <Field name="name">226 {(props) => {227 injectedProps = props228 return <input type="text" {...injectedProps.field} required />229 }}230 </Field>,231 )232 const input = screen.getByRole('textbox')233 expect(input).toHaveAttribute('name', 'name')...
to-be-checked.js
Source: to-be-checked.js
...4 const {queryByTestId} = render(`5 <input type="checkbox" checked data-testid="input-checkbox-checked" />6 <input type="checkbox" data-testid="input-checkbox-unchecked" />7 `)8 expect(queryByTestId('input-checkbox-checked')).toBeChecked()9 expect(queryByTestId('input-checkbox-unchecked')).not.toBeChecked()10 })11 test('handles radio input', () => {12 const {queryByTestId} = render(`13 <input type="radio" checked value="foo" data-testid="input-radio-checked" />14 <input type="radio" value="foo" data-testid="input-radio-unchecked" />15 `)16 expect(queryByTestId('input-radio-checked')).toBeChecked()17 expect(queryByTestId('input-radio-unchecked')).not.toBeChecked()18 })19 test('handles element with role="checkbox"', () => {20 const {queryByTestId} = render(`21 <div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" />22 <div role="checkbox" aria-checked="false" data-testid="aria-checkbox-unchecked" />23 `)24 expect(queryByTestId('aria-checkbox-checked')).toBeChecked()25 expect(queryByTestId('aria-checkbox-unchecked')).not.toBeChecked()26 })27 test('handles element with role="radio"', () => {28 const {queryByTestId} = render(`29 <div role="radio" aria-checked="true" data-testid="aria-radio-checked" />30 <div role="radio" aria-checked="false" data-testid="aria-radio-unchecked" />31 `)32 expect(queryByTestId('aria-radio-checked')).toBeChecked()33 expect(queryByTestId('aria-radio-unchecked')).not.toBeChecked()34 })35 test('handles element with role="switch"', () => {36 const {queryByTestId} = render(`37 <div role="switch" aria-checked="true" data-testid="aria-switch-checked" />38 <div role="switch" aria-checked="false" data-testid="aria-switch-unchecked" />39 `)40 expect(queryByTestId('aria-switch-checked')).toBeChecked()41 expect(queryByTestId('aria-switch-unchecked')).not.toBeChecked()42 })43 test('throws when checkbox input is checked but expected not to be', () => {44 const {queryByTestId} = render(45 `<input type="checkbox" checked data-testid="input-checked" />`,46 )47 expect(() =>48 expect(queryByTestId('input-checked')).not.toBeChecked(),49 ).toThrowError()50 })51 test('throws when input checkbox is not checked but expected to be', () => {52 const {queryByTestId} = render(53 `<input type="checkbox" data-testid="input-empty" />`,54 )55 expect(() =>56 expect(queryByTestId('input-empty')).toBeChecked(),57 ).toThrowError()58 })59 test('throws when element with role="checkbox" is checked but expected not to be', () => {60 const {queryByTestId} = render(61 `<div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" />`,62 )63 expect(() =>64 expect(queryByTestId('aria-checkbox-checked')).not.toBeChecked(),65 ).toThrowError()66 })67 test('throws when element with role="checkbox" is not checked but expected to be', () => {68 const {queryByTestId} = render(69 `<div role="checkbox" aria-checked="false" data-testid="aria-checkbox-unchecked" />`,70 )71 expect(() =>72 expect(queryByTestId('aria-checkbox-unchecked')).toBeChecked(),73 ).toThrowError()74 })75 test('throws when radio input is checked but expected not to be', () => {76 const {queryByTestId} = render(77 `<input type="radio" checked data-testid="input-radio-checked" />`,78 )79 expect(() =>80 expect(queryByTestId('input-radio-checked')).not.toBeChecked(),81 ).toThrowError()82 })83 test('throws when input radio is not checked but expected to be', () => {84 const {queryByTestId} = render(85 `<input type="radio" data-testid="input-radio-unchecked" />`,86 )87 expect(() =>88 expect(queryByTestId('input-radio-unchecked')).toBeChecked(),89 ).toThrowError()90 })91 test('throws when element with role="radio" is checked but expected not to be', () => {92 const {queryByTestId} = render(93 `<div role="radio" aria-checked="true" data-testid="aria-radio-checked" />`,94 )95 expect(() =>96 expect(queryByTestId('aria-radio-checked')).not.toBeChecked(),97 ).toThrowError()98 })99 test('throws when element with role="radio" is not checked but expected to be', () => {100 const {queryByTestId} = render(101 `<div role="radio" aria-checked="false" data-testid="aria-radio-unchecked" />`,102 )103 expect(() =>104 expect(queryByTestId('aria-checkbox-unchecked')).toBeChecked(),105 ).toThrowError()106 })107 test('throws when element with role="switch" is checked but expected not to be', () => {108 const {queryByTestId} = render(109 `<div role="switch" aria-checked="true" data-testid="aria-switch-checked" />`,110 )111 expect(() =>112 expect(queryByTestId('aria-switch-checked')).not.toBeChecked(),113 ).toThrowError()114 })115 test('throws when element with role="switch" is not checked but expected to be', () => {116 const {queryByTestId} = render(117 `<div role="switch" aria-checked="false" data-testid="aria-switch-unchecked" />`,118 )119 expect(() =>120 expect(queryByTestId('aria-switch-unchecked')).toBeChecked(),121 ).toThrowError()122 })123 test('throws when element with role="checkbox" has an invalid aria-checked attribute', () => {124 const {queryByTestId} = render(125 `<div role="checkbox" aria-checked="something" data-testid="aria-checkbox-invalid" />`,126 )127 expect(() =>128 expect(queryByTestId('aria-checkbox-invalid')).toBeChecked(),129 ).toThrowError(130 'only inputs with type="checkbox" or type="radio" or elements with role="checkbox", role="radio" or role="switch" and a valid aria-checked attribute can be used with .toBeChecked(). Use .toHaveValue() instead',131 )132 })133 test('throws when element with role="radio" has an invalid aria-checked attribute', () => {134 const {queryByTestId} = render(135 `<div role="radio" aria-checked="something" data-testid="aria-radio-invalid" />`,136 )137 expect(() =>138 expect(queryByTestId('aria-radio-invalid')).toBeChecked(),139 ).toThrowError(140 'only inputs with type="checkbox" or type="radio" or elements with role="checkbox", role="radio" or role="switch" and a valid aria-checked attribute can be used with .toBeChecked(). Use .toHaveValue() instead',141 )142 })143 test('throws when element with role="switch" has an invalid aria-checked attribute', () => {144 const {queryByTestId} = render(145 `<div role="switch" aria-checked="something" data-testid="aria-switch-invalid" />`,146 )147 expect(() =>148 expect(queryByTestId('aria-switch-invalid')).toBeChecked(),149 ).toThrowError(150 'only inputs with type="checkbox" or type="radio" or elements with role="checkbox", role="radio" or role="switch" and a valid aria-checked attribute can be used with .toBeChecked(). Use .toHaveValue() instead',151 )152 })153 test('throws when the element is not an input', () => {154 const {queryByTestId} = render(`<select data-testid="select"></select>`)155 expect(() => expect(queryByTestId('select')).toBeChecked()).toThrowError(156 'only inputs with type="checkbox" or type="radio" or elements with role="checkbox", role="radio" or role="switch" and a valid aria-checked attribute can be used with .toBeChecked(). Use .toHaveValue() instead',157 )158 })159})...
EmailAttachmentPicker.unit.spec.js
...28 expect(screen.queryByText("card2")).toBeNull();29 const toggle = screen.getByLabelText("Attach results");30 fireEvent.click(toggle);31 const csvFormatInput = screen.getByLabelText(".csv");32 expect(csvFormatInput).toBeChecked();33 const toggleAllCheckbox = screen.getByLabelText("Questions to attach");34 expect(toggleAllCheckbox).not.toBeChecked();35 const card1Checkbox = screen.getByLabelText("card1");36 expect(card1Checkbox).not.toBeChecked();37 const card2Checkbox = screen.getByLabelText("card2");38 expect(card2Checkbox).not.toBeChecked();39 });40 });41 describe("when instantiated with cards with attachments", () => {42 let pulse;43 let setPulse;44 beforeEach(() => {45 pulse = createPulse();46 pulse.cards[0]["include_xls"] = true;47 setPulse = jest.fn();48 render(49 <EmailAttachmentPicker50 cards={pulse.cards}51 pulse={pulse}52 setPulse={setPulse}53 />,54 );55 });56 it("should have a toggled Toggle", () => {57 const toggle = screen.getByLabelText("Attach results");58 expect(toggle).toBeInTheDocument();59 expect(toggle).toHaveAttribute("aria-checked", "true");60 });61 it("should have selected the xlsv format", () => {62 const csvFormatInput = screen.getByLabelText(".csv");63 expect(csvFormatInput).not.toBeChecked();64 const xlsxFormatInput = screen.getByLabelText(".xlsx");65 expect(xlsxFormatInput).toBeChecked();66 });67 it("should show a checked checkbox for the card with an attachment", () => {68 const toggleAllCheckbox = screen.getByLabelText("Questions to attach");69 expect(toggleAllCheckbox).not.toBeChecked();70 const card1Checkbox = screen.getByLabelText("card1");71 expect(card1Checkbox).toBeChecked();72 const card2Checkbox = screen.getByLabelText("card2");73 expect(card2Checkbox).not.toBeChecked();74 });75 it("should let you check or uncheck card checkboxes", () => {76 const card1Checkbox = screen.getByLabelText("card1");77 fireEvent.click(card1Checkbox);78 expect(card1Checkbox).not.toBeChecked();79 fireEvent.click(card1Checkbox);80 expect(card1Checkbox).toBeChecked();81 });82 it("should let you check all checkboxes", () => {83 const card2Checkbox = screen.getByLabelText("card2");84 fireEvent.click(card2Checkbox);85 expect(card2Checkbox).toBeChecked();86 expect(screen.getByLabelText("Questions to attach")).toBeChecked();87 });88 it("should let you check/uncheck all boxes via the `Questions to attach` toggle", () => {89 const toggleAllCheckbox = screen.getByLabelText("Questions to attach");90 const card1Checkbox = screen.getByLabelText("card1");91 const card2Checkbox = screen.getByLabelText("card2");92 fireEvent.click(toggleAllCheckbox);93 expect(screen.getByLabelText("Questions to attach")).toBeChecked();94 expect(card1Checkbox).toBeChecked();95 expect(card2Checkbox).toBeChecked();96 fireEvent.click(toggleAllCheckbox);97 expect(screen.getByLabelText("Questions to attach")).not.toBeChecked();98 expect(card1Checkbox).not.toBeChecked();99 expect(card2Checkbox).not.toBeChecked();100 });101 it("should uncheck all boxes if disabling attachments", () => {102 const toggle = screen.getByLabelText("Attach results");103 expect(screen.getByLabelText("card1")).toBeChecked();104 fireEvent.click(toggle);105 expect(screen.queryByText("File format")).toBeNull();106 expect(screen.queryByText("Questions to attach")).toBeNull();107 expect(screen.queryByText("card1")).toBeNull();108 expect(screen.queryByText("card2")).toBeNull();109 fireEvent.click(toggle);110 expect(screen.getByLabelText("card1")).not.toBeChecked();111 });112 });113});114function createPulse() {115 return {116 name: "Parameters",117 cards: [118 {119 id: 4,120 collection_id: null,121 description: null,122 display: "map",123 name: "card1",124 include_csv: false,...
location.test.js
Source: location.test.js
...60 act( () => {61 fireEvent.click( bostonInput );62 } );63 const homeToBeFilteredOut = queryByText( cambridgeHome.title );64 expect( bostonInput ).toBeChecked();65 expect( homeToBeFilteredOut ).not.toBeInTheDocument();66 } );67 it( 'Filters results to only homes outside Boston', () => {68 const homesToFilter = [dorchesterHome, cambridgeHome];69 const { getByLabelText, queryByText } = render(70 <MemoryRouter initialEntries={['/metrolist/search']} initialIndex={0}>71 <Search72 homes={ homesToFilter }73 filters={ getNoFiltersApplied() }74 />75 </MemoryRouter>,76 );77 const beyondBostonInput = getByLabelText( 'Beyond Boston', { "selector": "input" } );78 act( () => {79 fireEvent.click( beyondBostonInput );80 } );81 const homeToBeFilteredOut = queryByText( dorchesterHome.title );82 expect( beyondBostonInput ).toBeChecked();83 expect( homeToBeFilteredOut ).not.toBeInTheDocument();84 } );85 it( 'Sets all neighborhood checkboxes appropriately when the âBostonâ checkbox is toggled', async () => {86 const homesToFilter = [dorchesterHome, southieHome];87 const { getByLabelText } = render(88 <MemoryRouter initialEntries={['/metrolist/search']} initialIndex={0}>89 <Search90 homes={ homesToFilter }91 filters={ getNoFiltersApplied() }92 />93 </MemoryRouter>,94 );95 const bostonInput = getByLabelText( 'Boston', { "selector": "input" } );96 const dotInput = getByLabelText( /Dorchester \(.*\)/, { "selector": "input" } );97 const southieInput = getByLabelText( /South Boston \(.*\)/, { "selector": "input" } );98 // For some reason the first fireEvent has to be a change,99 // and the second fireEvent has to be a click for the test to pass.100 // Makes no sense whatsoever.101 act( () => {102 // fireEvent.click( bostonInput );103 fireEvent.change( bostonInput, { "target": { "checked": true } } );104 } );105 expect( bostonInput ).toBeChecked();106 expect( dotInput ).toBeChecked();107 expect( southieInput ).toBeChecked();108 act( () => {109 fireEvent.click( bostonInput );110 // fireEvent.change( bostonInput, { "target": { "checked": false } } );111 } );112 expect( bostonInput ).not.toBeChecked();113 expect( dotInput ).not.toBeChecked();114 expect( southieInput ).not.toBeChecked();115 } );116 it( 'Sets all cardinal direction checkboxes appropriately when the âBeyond Bostonâ checkbox is toggled', async () => {117 const { getByLabelText } = render(118 <MemoryRouter initialEntries={['/metrolist/search']} initialIndex={0}>119 <Search filters={ getNoFiltersApplied() } />120 </MemoryRouter>,121 );122 const beyondBostonInput = getByLabelText( 'Beyond Boston',123 { "selector": "input" } );124 let westInput;125 let southInput;126 await act( async () => {127 westInput = await waitFor( () => getByLabelText( /West of Boston \(.*\)/, { "selector": "input" } ) );128 southInput = await waitFor( () => getByLabelText( /South of Boston \(.*\)/, { "selector": "input" } ) );129 // For some reason this fireEvent has to go inside act() or there is a race condition and the test fails,130 // even though it works outside of act() in the previous test131 fireEvent.click( beyondBostonInput );132 } );133 expect( beyondBostonInput ).toBeChecked();134 expect( westInput ).toBeChecked();135 expect( southInput ).toBeChecked();136 act( () => {137 fireEvent.click( beyondBostonInput );138 } );139 expect( beyondBostonInput ).not.toBeChecked();140 expect( westInput ).not.toBeChecked();141 expect( southInput ).not.toBeChecked();142 } );143};144describe( 'Location', locationTest );...
toggle_switches.js
Source: toggle_switches.js
1// Toggle switches (auto reload on toggle)2// ---------------------3// Manage/MturkWorker/index4function toggleBlacklisted() {5 $('#mturk-worker-blacklisted-checkbox').change(function() {6 let toBeChecked = $(this).is(':checked');7 toggleParam('show_blacklisted', toBeChecked);8 });9}10function toggleReviewed() {11 $('#mturk-worker-reviewed-checkbox').change(function() {12 let toBeChecked = $(this).is(':checked');13 toggleParam('show_reviewed', toBeChecked);14 });15}16function toggleBlocked() {17 $('#mturk-worker-blocked-checkbox').change(function() {18 let toBeChecked = $(this).is(':checked');19 toggleParam('show_blocked', toBeChecked);20 });21}22// Manage/MturkWorker/review23function selectWorkerReviewBatchJob() {24 $('#worker-review-mturk_batch_job-filter').change(function() {25 let batch_name = $(this).find(":selected").val()26 changeSelectParam('batch_name_filter', batch_name)27 })28}29// Manage/MturkCachedHit/index30function toggleSandbox() {31 $('.production-checkbox').change(function() {32 let toBeChecked = $(this).is(':checked');33 toggleParam('sandbox', !toBeChecked);34 });35}36function togglePlatformOnly() {37 $('.platform_only-hits-checkbox').change(function() {38 let toBeChecked = $(this).is(':checked');39 toggleParam('platform_only', toBeChecked);40 });41}42function toggleShowAssignable() {43 $('.assignable-hits-checkbox').change(function() {44 let toBeChecked = $(this).is(':checked');45 toggleParam('show_assignable', toBeChecked);46 });47}48function toggleShowUnassignable() {49 $('.unassignable-hits-checkbox').change(function() {50 let toBeChecked = $(this).is(':checked');51 toggleParam('show_unassignable', toBeChecked);52 });53}54function toggleShowReviewable() {55 $('.reviewable-hits-checkbox').change(function() {56 let toBeChecked = $(this).is(':checked');57 toggleParam('show_reviewable', toBeChecked);58 });59}60function toggleShowReviewing() {61 $('.reviewing-hits-checkbox').change(function() {62 let toBeChecked = $(this).is(':checked');63 toggleParam('show_reviewing', toBeChecked);64 });65}66// Admin/Result/index67function toggleGroupByQs() {68 $('.groupby-qs').change(function() {69 let toBeChecked = $(this).is(':checked');70 toggleParam('group_by_qs', toBeChecked);71 });72}73function selectProjectResults() {74 $('#results-select-project-filter').change(function() {75 let project_id = $(this).find(":selected").val()76 changeSelectParam('project_id_filter', project_id)77 })78}79function selectResTypeResults() {80 $('#results-res-type-filterfilter').change(function() {81 let res_type = $(this).find(":selected").val()82 changeSelectParam('res_type_filter', res_type)83 })84}85// Manage/MturkBatchJob/Task/index86function toggleTaskUnsubmited() {87 $('.tasks-unsubmitted').change(function() {88 let toBeChecked = $(this).is(':checked');89 toggleParam('show_unsubmitted', toBeChecked);90 });91}92function toggleTaskSubmited() {93 $('.tasks-submitted').change(function() {94 let toBeChecked = $(this).is(':checked');95 toggleParam('show_submitted', toBeChecked);96 });97}98function toggleTaskAssigned() {99 $('.tasks-assigned').change(function() {100 let toBeChecked = $(this).is(':checked');101 toggleParam('show_assigned', toBeChecked);102 });103}104function toggleTaskCompleted() {105 $('.tasks-completed').change(function() {106 let toBeChecked = $(this).is(':checked');107 toggleParam('show_completed', toBeChecked);108 });109}110// Select all checkbox (looks for checkboxes with class multi-checkable)111function toggleCheckAll() {112 $('#check-all').change(function() {113 let checkboxes = $('.multi-checkable')114 checkboxes.prop('checked', $(this).is(':checked'));115 });116}117// helpers118function toggleParam(param, toBeChecked) {119 let url = new URL(window.location.href);120 url.searchParams.delete(param)121 if (toBeChecked) {122 url.searchParams.append(param, true)123 } else {124 url.searchParams.append(param, false)125 }126 window.location.href = url.href127}128function changeSelectParam(param, value) {129 let url = new URL(window.location.href);130 url.searchParams.delete(param)131 url.searchParams.append(param, value)132 window.location.href = url.href133}134$(document).on('turbolinks:load', function() {135 toggleBlacklisted();136 toggleReviewed();137 toggleBlocked();138 toggleGroupByQs();139 toggleSandbox();140 togglePlatformOnly();141 toggleShowAssignable();142 toggleShowUnassignable();143 toggleShowReviewable();144 toggleShowReviewing();145 toggleTaskUnsubmited();146 toggleTaskSubmited();147 toggleTaskAssigned();148 toggleTaskCompleted();149 selectProjectResults();150 selectResTypeResults();151 selectWorkerReviewBatchJob();152 toggleCheckAll();...
Search.test.js
Source: Search.test.js
...18 const lth = screen.getByLabelText("Low to High")19 , htl = screen.getByLabelText("High to Low")20 , sr = screen.getByLabelText("Star Rating");21 fireEvent.click(lth);22 expect(lth).toBeChecked();23 expect(htl).not.toBeChecked();24 expect(sr).not.toBeChecked();25 fireEvent.click(htl);26 expect(lth).not.toBeChecked();27 expect(htl).toBeChecked();28 expect(sr).not.toBeChecked();29 fireEvent.click(sr);30 expect(lth).not.toBeChecked();31 expect(htl).not.toBeChecked();32 expect(sr).toBeChecked();33 });34 test('price filter buttons are displayed', () => {35 render(<Search />);36 const moneySymbol = "attach_money";37 expect(screen.getByLabelText(moneySymbol)).toBeTruthy();38 expect(screen.getByLabelText(moneySymbol.repeat(3))).toBeTruthy();39 });40 test('rating filter buttons are displayed', () => {41 render(<Search />);42 const starSymbol = "star_rate";43 expect(screen.getByLabelText(starSymbol)).toBeTruthy();44 expect(screen.getByLabelText(starSymbol.repeat(2))).toBeTruthy();45 expect(screen.getByLabelText(starSymbol.repeat(3))).toBeTruthy();46 expect(screen.getByLabelText(starSymbol.repeat(4))).toBeTruthy();47 expect(screen.getByLabelText(starSymbol.repeat(5))).toBeTruthy();48 });49 test('price filter buttons are grouped', () => {50 render(<Search />);51 const moneySymbol = "attach_money";52 const money1 = screen.getByLabelText(moneySymbol)53 , money3 = screen.getByLabelText(moneySymbol.repeat(3));54 fireEvent.click(money1);55 expect(money1).toBeChecked();56 expect(money3).not.toBeChecked();57 fireEvent.click(money3);58 expect(money1).not.toBeChecked();59 expect(money3).toBeChecked();60 });61 test('rating filter buttons are grouped', () => {62 render(<Search />);63 const starSymbol = "star_rate";64 const money1 = screen.getByLabelText(starSymbol)65 , money2 = screen.getByLabelText(starSymbol.repeat(2))66 , money3 = screen.getByLabelText(starSymbol.repeat(3))67 , money4 = screen.getByLabelText(starSymbol.repeat(4))68 , money5 = screen.getByLabelText(starSymbol.repeat(5));69 fireEvent.click(money1);70 expect(money1).toBeChecked();71 expect(money2).not.toBeChecked();72 expect(money3).not.toBeChecked();73 expect(money4).not.toBeChecked();74 expect(money5).not.toBeChecked();75 fireEvent.click(money2);76 expect(money1).not.toBeChecked();77 expect(money2).toBeChecked();78 expect(money3).not.toBeChecked();79 expect(money4).not.toBeChecked();80 expect(money5).not.toBeChecked();81 fireEvent.click(money3);82 expect(money1).not.toBeChecked();83 expect(money2).not.toBeChecked();84 expect(money3).toBeChecked();85 expect(money4).not.toBeChecked();86 expect(money5).not.toBeChecked();87 fireEvent.click(money4);88 expect(money1).not.toBeChecked();89 expect(money2).not.toBeChecked();90 expect(money3).not.toBeChecked();91 expect(money4).toBeChecked();92 expect(money5).not.toBeChecked();93 fireEvent.click(money5);94 expect(money1).not.toBeChecked();95 expect(money2).not.toBeChecked();96 expect(money3).not.toBeChecked();97 expect(money4).not.toBeChecked();98 expect(money5).toBeChecked();99 });100});101describe('Result tab', () => {102 test('result tab shows', () => {103 render(<Search/>);104 expect(screen.getByLabelText("Food")).toBeTruthy();105 expect(screen.getByLabelText("Restaurant")).toBeTruthy();106 });107 test('result tab alternates', async () => {108 render(<Search/>);109 const foodTab = screen.getByLabelText("food results tab")110 , restTab = screen.getByLabelText("restaurant results tab");111 fireEvent.click(screen.getByText("Food"));112 expect(foodTab).toBeVisible();...
05.js
Source: 05.js
...3import App from '../final/05'4// import App from '../exercise/05'5test('renders a toggle component', () => {6 const {toggleButton, toggle} = renderToggle(<App />)7 expect(toggleButton).not.toBeChecked()8 toggle()9 expect(toggleButton).toBeChecked()10 toggle()11 expect(toggleButton).not.toBeChecked()12})13test('can click too much', () => {14 const {toggleButton, toggle} = renderToggle(<App />)15 expect(toggleButton).not.toBeChecked()16 toggle() // 117 expect(toggleButton).toBeChecked()18 toggle() // 219 expect(toggleButton).not.toBeChecked()20 expect(screen.getByTestId('click-count')).toHaveTextContent('2')21 toggle() // 322 expect(toggleButton).toBeChecked()23 expect(screen.queryByText(/whoa/i)).not.toBeInTheDocument()24 toggle() // 425 expect(toggleButton).toBeChecked()26 expect(screen.getByText(/whoa/i)).toBeInTheDocument()27 toggle() // 5: Whoa, too many28 expect(toggleButton).toBeChecked()29 toggle() // 630 expect(toggleButton).toBeChecked()31 expect(screen.getByTestId('notice')).not.toBeNull()32 userEvent.click(screen.getByText('Reset'))33 expect(screen.queryByTestId('notice')).toBeNull()34 expect(toggleButton).not.toBeChecked()35 toggle()36 expect(toggleButton).toBeChecked()37 expect(screen.getByTestId('click-count')).toHaveTextContent('1')...
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.click('text=Get started');7 await page.click('text=Docs');8 await page.click('text=API');9 await page.click('text=Page');10 await page.click('text=expect');11 const element = await page.$('text=expect');12 const isChecked = await element.evaluate((element) => element.checked);13 console.log(isChecked);14 await browser.close();15})();16const { chromium } = require('playwright');17(async () => {18 const browser = await chromium.launch();19 const context = await browser.newContext();20 const page = await context.newPage();21 await page.click('text=Get started');22 await page.click('text=Docs');23 await page.click('text=API');24 await page.click('text=Page');25 await page.click('text=expect');26 const element = await page.$('text=expect');27 const isChecked = await element.evaluate((element) => element.checked);28 console.log(isChecked);29 await browser.close();30})();31const { chromium } = require('playwright');32(async () => {33 const browser = await chromium.launch();34 const context = await browser.newContext();35 const page = await context.newPage();36 await page.click('text=Get started');37 await page.click('text=Docs');38 await page.click('text=API');39 await page.click('text=Page');40 await page.click('text=expect');41 const element = await page.$('text=expect');42 const isChecked = await element.evaluate((element) => element.checked);43 console.log(isChecked);44 await browser.close();45})();46const { chromium } = require('playwright');47(async () => {48 const browser = await chromium.launch();49 const context = await browser.newContext();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 const input = await page.$('input[name="q"]');6 await input.click();7 await input.type('Hello World!');8 await input.press('Enter');9 await page.waitForTimeout(2000);10 await page.screenshot({ path: `example.png` });11 await browser.close();12})();13const { chromium } = require('playwright');14(async () => {15 const browser = await chromium.launch();16 const page = await browser.newPage();17 const input = await page.$('input[name="q"]');18 await input.click();19 await input.type('Hello World!');20 await input.press('Enter');21 await page.waitForTimeout(2000);22 await page.screenshot({ path: `example.png` });23 await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27 const browser = await chromium.launch();28 const page = await browser.newPage();29 const input = await page.$('input[name="q"]');30 await input.click();31 await input.type('Hello World!');32 await input.press('Enter');33 await page.waitForTimeout(2000);34 await page.screenshot({ path: `example.png` });35 await browser.close();36})();37const { chromium } = require('playwright');38(async () => {39 const browser = await chromium.launch();40 const page = await browser.newPage();41 const input = await page.$('input[name="q"]');42 await input.click();43 await input.type('Hello World!');44 await input.press('Enter');45 await page.waitForTimeout(2000);46 await page.screenshot({ path: `example.png` });47 await browser.close();48})();
Using AI Code Generation
1const { toBeChecked } = require('expect-playwright');2expect.extend({ toBeChecked });3test('should be checked', async () => {4 const checkbox = await page.$('input[type="checkbox"]');5 await checkbox.check();6 await expect(checkbox).toBeChecked();7});
Using AI Code Generation
1import { toBeChecked } from 'expect-playwright';2expect.extend({ toBeChecked });3test('Checkbox is checked', async () => {4 await page.click('text=All');5 await expect(page.locator('input[type="checkbox"]')).toBeChecked();6});7TypeError: page.locator(...).toBeChecked is not a function
Using AI Code Generation
1const { toBeChecked } = require('expect-playwright');2expect.extend({ toBeChecked });3await expect(page.locator('input')).toBeChecked();4await expect(page.locator('input')).not.toBeChecked();5await expect(page.locator('input')).toBeChecked({ timeout: 5000 });6await expect(page.locator('input')).toBeChecked({ timeout: 5000, message: 'Expectation message' });7await expect(page.locator('input')).toBeChecked({ timeout: 5000, message: 'Expectation message', timeoutMsg: 'Timeout message' });8await expect(page.locator('input')).toBeChecked({ timeout: 5000, message: 'Expectation message', timeoutMsg: 'Timeout message', interval: 2000 });9await expect(page.locator('input')).toBeChecked({ timeout: 5000, message: 'Expectation message', timeoutMsg: 'Timeout message', interval: 2000, verbose: true });10await expect(page.locator('input')).toBeChecked({ timeout: 5000, message: 'Expectation message', timeoutMsg: 'Timeout message', interval: 2000, verbose: true, ignoreDefaultArgs: false });11await expect(page.locator('input')).toBeChecked({ timeout: 5000, message: 'Expectation message', timeoutMsg: 'Timeout message', interval: 2000, verbose: true, ignoreDefaultArgs: false, headful: false });12await expect(page.locator('input')).toBeChecked({ timeout: 5000, message: 'Expectation message', timeoutMsg: 'Timeout message', interval: 2000, verbose: true, ignoreDefaultArgs: false, headful: false, devtools: false });
Jest + Playwright - Test callbacks of event-based DOM library
firefox browser does not start in playwright
Is it possible to get the selector from a locator object in playwright?
How to run a list of test suites in a single file concurrently in jest?
Running Playwright in Azure Function
firefox browser does not start in playwright
This question is quite close to a "need more focus" question. But let's try to give it some focus:
Does Playwright has access to the cPicker object on the page? Does it has access to the window object?
Yes, you can access both cPicker and the window object inside an evaluate call.
Should I trigger the events from the HTML file itself, and in the callbacks, print in the DOM the result, in some dummy-element, and then infer from that dummy element text that the callbacks fired?
Exactly, or you can assign values to a javascript variable:
const cPicker = new ColorPicker({
onClickOutside(e){
},
onInput(color){
window['color'] = color;
},
onChange(color){
window['result'] = color;
}
})
And then
it('Should call all callbacks with correct arguments', async() => {
await page.goto(`http://localhost:5000/tests/visual/basic.html`, {waitUntil:'load'})
// Wait until the next frame
await page.evaluate(() => new Promise(requestAnimationFrame))
// Act
// Assert
const result = await page.evaluate(() => window['color']);
// Check the value
})
Check out the latest blogs from LambdaTest on this topic:
Native apps are developed specifically for one platform. Hence they are fast and deliver superior performance. They can be downloaded from various app stores and are not accessible through browsers.
One of the essential parts when performing automated UI testing, whether using Selenium or another framework, is identifying the correct web elements the tests will interact with. However, if the web elements are not located correctly, you might get NoSuchElementException in Selenium. This would cause a false negative result because we won’t get to the actual functionality check. Instead, our test will fail simply because it failed to interact with the correct element.
Smartphones have changed the way humans interact with technology. Be it travel, fitness, lifestyle, video games, or even services, it’s all just a few touches away (quite literally so). We only need to look at the growing throngs of smartphone or tablet users vs. desktop users to grasp this reality.
As part of one of my consulting efforts, I worked with a mid-sized company that was looking to move toward a more agile manner of developing software. As with any shift in work style, there is some bewilderment and, for some, considerable anxiety. People are being challenged to leave their comfort zones and embrace a continuously changing, dynamic working environment. And, dare I say it, testing may be the most ‘disturbed’ of the software roles in agile development.
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Get 100 minutes of automation test minutes FREE!!