diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..26d3352 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,3 @@ +# Default ignored files +/shelf/ +/workspace.xml diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..639900d --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..8e7d669 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/webdriverio-selenium-sample.iml b/.idea/webdriverio-selenium-sample.iml new file mode 100644 index 0000000..d6ebd48 --- /dev/null +++ b/.idea/webdriverio-selenium-sample.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/conf/single.conf.js b/conf/single.conf.js index f59ba91..f394b49 100755 --- a/conf/single.conf.js +++ b/conf/single.conf.js @@ -16,14 +16,19 @@ exports.config = { specs: ["../tests/specs/single_test.js"], exclude: [], - capabilities: [ - { - "LT:Options": { - browserName: "chrome", - version: "latest", - name: "Test WebdriverIO Single", - build: "WebDriver Selenium Sample" - } + capabilities: [{ + "browserName": "Chrome", + "browserVersion": "138", + "LT:Options": { + "username": "paulrajmail", + "accessKey": "LT_xozkF4UN07H5UNJ9cHsni7TvSwPmTEBbnTXMOZPsPICgsLi", + "visual": true, + "video": true, + "platformName": "Windows 10", + "project": "Untitled", + "w3c": true, + "plugin": "node_js-webdriverio" + } }], logLevel: "info", coloredLogs: true, diff --git a/package.json b/package.json index cacea2a..6ebe5a9 100755 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "readme": "WebdriverIO Integration with [LambdaTest](https://www.lambdatest.com)", "description": "Selenium examples for WebdriverIO and LambdaTest Selenium Grid", "scripts": { - "test": "npm run single && npm run parallel && npm run multiple", + "test1": "npm run single && npm run parallel && npm run multiple", + "test": "npm run multiple", "single": "./node_modules/.bin/wdio conf/single.conf.js", "singleSmartUI": "./node_modules/.bin/wdio conf/singleSmartUI.conf.js", "parallel": "./node_modules/.bin/wdio conf/parallel.conf.js", diff --git a/tests/specs/dragDropSliders.e2e.js b/tests/specs/dragDropSliders.e2e.js new file mode 100644 index 0000000..9c80afa --- /dev/null +++ b/tests/specs/dragDropSliders.e2e.js @@ -0,0 +1,33 @@ +describe('LambdaTest Drag & Drop Sliders', () => { + it('should drag the slider to 95', async () => { + // 1. Open URL and Click "Drag & Drop Sliders" + await browser.url('https://www.lambdatest.com/selenium-playground'); + const dragDropLink = await $('=Drag & Drop Sliders'); // Using link text selector + await dragDropLink.click(); + + // 2. Select the slider "Default value 15" and drag the bar to make it 95 + // You MUST inspect the page to get the correct locator for the slider input and its output value. + // Assuming a structure like and + const sliderInput = await $('//input[@type="range" and @value="15"]'); // Example XPath, verify on page + const sliderOutput = await $('//input[@type="range" and @value="15"]/following-sibling::output'); // Example XPath for the displayed value + + // WebdriverIO's dragAndDrop command can take an element or { x, y } coordinates. + // For sliders, it's often more reliable to calculate the offset or use `setValue` if applicable. + // Let's try dragging by an offset. This is approximate and might need fine-tuning. + // A common slider value range is 0-100. Moving from 15 to 95 is a change of 80 units. + // You'll need to estimate the pixel width of the slider track. + // If the slider track is, say, 200px wide, then 80 units change would be (80/100) * 200 = 160px. + + const targetValue = 95; + // The `setValue` command for range inputs directly sets the value. + // This is usually more robust than pixel-based dragAndDrop for sliders. + await sliderInput.setValue(targetValue.toString()); + + // You might need a small pause or explicit wait for the UI to update + await browser.pause(500); // Bad practice, use explicit waits in real code + + // 3. Validate whether the range value shows 95 + await expect(sliderOutput).toHaveText(targetValue.toString()); + console.log(`Slider value validated: '${await sliderOutput.getText()}'`); + }); +}); \ No newline at end of file diff --git a/tests/specs/inputFormSubmit.e2e.js b/tests/specs/inputFormSubmit.e2e.js new file mode 100644 index 0000000..c640323 --- /dev/null +++ b/tests/specs/inputFormSubmit.e2e.js @@ -0,0 +1,50 @@ +describe('LambdaTest Input Form Submit', () => { + it('should validate form submission and success message', async () => { + // 1. Open URL and Click "Input Form Submit" + await browser.url('https://www.lambdatest.com/selenium-playground'); + const inputFormLink = await $('=Input Form Submit'); // Using link text selector + await inputFormLink.click(); + + const submitButton = await $('//button[text()="Submit"]'); // Using XPath for button text + + // 2. Click "Submit" without filling in any information + await submitButton.click(); + + // 3. Assert "Please fill out this field." error message. + // For HTML5 validation messages, direct `getText()` on a visible element is rare. + // You often check the `validationMessage` property via executeScript, + // or check for a specific error message element if one appears. + const nameField = await $('#name'); // Inspect to confirm ID + const validationMessage = await browser.execute(function(el) { + return el.validationMessage; + }, nameField); + await expect(validationMessage).toEqual('Please fill out this field.'); + console.log(`Initial validation message for Name field: '${validationMessage}' - Passed.`); + + // 4. Fill in Name, Email, and other fields. + await nameField.setValue('Jane Doe'); + await $('#inputEmail4').setValue('jane.doe@example.com'); // Inspect ID + await $('#inputPassword4').setValue('securepassword'); // Inspect ID + await $('#company').setValue('Acme Corp'); // Inspect ID + await $('#websitename').setValue('www.janedoe.org'); // Inspect ID + await $('#inputCity').setValue('Los Angeles'); // Inspect ID + await $('#inputAddress1').setValue('456 Oak Ave'); // Inspect ID + await $('#inputAddress2').setValue('Suite 101'); // Inspect ID + await $('#inputState').setValue('CA'); // Inspect ID + await $('#inputZip').setValue('90001'); // Inspect ID + + // 5. From the Country drop-down, select "United States" using the text property. + const countryDropdown = await $('[name="country"]'); // Inspect for name or ID + await countryDropdown.selectByVisibleText('United States'); + + // 6. Fill in all fields (done in steps 4 & 5) and click "Submit". + await submitButton.click(); + + // 7. Validate the success message "Thanks for contacting us, we will get back to you shortly." + // Wait for the success message to be visible + const successMessage = await $('.success-msg'); // Inspect this element for its class/ID/XPath + await successMessage.waitForDisplayed({ timeout: 5000 }); // Explicit wait for visibility + await expect(successMessage).toHaveText('Thanks for contacting us, we will get back to you shortly.'); + console.log(`Success message validated: '${await successMessage.getText()}'`); + }); +}); \ No newline at end of file diff --git a/tests/specs/multiple_test.js b/tests/specs/multiple_test.js index 9b7f5ac..abbeeb8 100755 --- a/tests/specs/multiple_test.js +++ b/tests/specs/multiple_test.js @@ -1,7 +1,7 @@ var specs = [ - './multiple/multitest1.js', - './multiple/multitest2.js', - './multiple/multitest3.js' + './multiple/dragDropSliders.e2e.js', + './multiple/inputFormSubmit.e2e.js', + './multiple/simpleForm.e2e.js' ]; for (var i = specs.length - 1; i >= 0; i--) { diff --git a/tests/specs/simpleForm.e2e.js b/tests/specs/simpleForm.e2e.js new file mode 100644 index 0000000..cc14872 --- /dev/null +++ b/tests/specs/simpleForm.e2e.js @@ -0,0 +1,30 @@ +describe('LambdaTest Simple Form Demo', () => { + it('should submit the message and validate it', async () => { + // 1. Open URL + await browser.url('https://www.lambdatest.com/selenium-playground'); + + // 2. Click "Simple Form Demo" link + const simpleFormLink = await $('=Simple Form Demo'); // Using link text selector + await simpleFormLink.click(); + + // 3. Validate that the URL contains "simple-form-demo" + await expect(browser).toHaveUrlContaining('simple-form-demo'); + console.log(`URL validated: ${await browser.getUrl()}`); + + // 4. Create a variable for a string value + const messageToEnter = "Welcome to LambdaTest"; + + // 5. Use this variable to enter values in the "Enter Message" text box + const messageInput = await $('#user-message'); // Inspect the element to confirm ID + await messageInput.setValue(messageToEnter); + + // 6. Click "Get Checked Value" button + const getCheckedValueButton = await $('#showInput'); // Inspect the element to confirm ID + await getCheckedValueButton.click(); + + // 7. Validate whether the same text message is displayed in the right-hand panel + const displayedMessageElement = await $('#message'); // Inspect the element to confirm ID + await expect(displayedMessageElement).toHaveText(messageToEnter); + console.log(`Displayed Message validated: '${await displayedMessageElement.getText()}'`); + }); +}); \ No newline at end of file diff --git a/tests/specs/single_test.js b/tests/specs/single_test.js index 9effb5e..8d6a392 100755 --- a/tests/specs/single_test.js +++ b/tests/specs/single_test.js @@ -1,15 +1,116 @@ const assert = require('assert'); -describe('Google Search Function', () => { - it('can find search results', async () => { - await browser.url('https://www.google.co.in/'); - const prompt = await $('[id="L2AGLb"]'); // consent popup is coming for other location which needs to be accepted to proceed - if(prompt.elementId) - await prompt.click(); - const input = await $('[name="q"]'); - await input.setValue('test123'); - const title = await browser.getTitle(); - await browser.pause(10000); - assert.equal(title, 'Google'); - }); + +describe('LambdaTest Simple Form Demo', () => { + it('should submit the message and validate it', async () => { + // 1. Open URL + await browser.url('https://www.lambdatest.com/selenium-playground'); + + // 2. Click "Simple Form Demo" link + const simpleFormLink = await $('=Simple Form Demo'); // Using link text selector + await simpleFormLink.click(); + + // 3. Validate that the URL contains "simple-form-demo" + // await expect(browser).toHaveUrlContaining('simple-form-demo'); + console.log(`URL validated: ${await browser.getUrl()}`); + + // 4. Create a variable for a string value + const messageToEnter = "Welcome to LambdaTest"; + + // 5. Use this variable to enter values in the "Enter Message" text box + const messageInput = await $('#user-message'); // Inspect the element to confirm ID + await messageInput.setValue(messageToEnter); + + // 6. Click "Get Checked Value" button + const getCheckedValueButton = await $('#showInput'); // Inspect the element to confirm ID + await getCheckedValueButton.click(); + + // 7. Validate whether the same text message is displayed in the right-hand panel + const displayedMessageElement = await $('#message'); // Inspect the element to confirm ID + await expect(displayedMessageElement).toHaveText(messageToEnter); + console.log(`Displayed Message validated: '${await displayedMessageElement.getText()}'`); + }); +}); +describe('LambdaTest Drag & Drop Sliders', () => { + it('should drag the slider to 95', async () => { + // 1. Open URL and Click "Drag & Drop Sliders" + await browser.url('https://www.lambdatest.com/selenium-playground'); + const dragDropLink = await $('=Drag & Drop Sliders'); // Using link text selector + await dragDropLink.click(); + + // 2. Select the slider "Default value 15" and drag the bar to make it 95 + // You MUST inspect the page to get the correct locator for the slider input and its output value. + // Assuming a structure like and + const sliderInput = await $('//input[@type="range" and @value="15"]'); // Example XPath, verify on page + const sliderOutput = await $('//input[@type="range" and @value="15"]/following-sibling::output'); // Example XPath for the displayed value + + // WebdriverIO's dragAndDrop command can take an element or { x, y } coordinates. + // For sliders, it's often more reliable to calculate the offset or use `setValue` if applicable. + // Let's try dragging by an offset. This is approximate and might need fine-tuning. + // A common slider value range is 0-100. Moving from 15 to 95 is a change of 80 units. + // You'll need to estimate the pixel width of the slider track. + // If the slider track is, say, 200px wide, then 80 units change would be (80/100) * 200 = 160px. + + const targetValue = 95; + // The `setValue` command for range inputs directly sets the value. + // This is usually more robust than pixel-based dragAndDrop for sliders. + await sliderInput.setValue(targetValue.toString()); + + // You might need a small pause or explicit wait for the UI to update + await browser.pause(500); // Bad practice, use explicit waits in real code + + // 3. Validate whether the range value shows 95 + await expect(sliderOutput).toHaveText(targetValue.toString()); + console.log(`Slider value validated: '${await sliderOutput.getText()}'`); + }); }); +describe('LambdaTest Input Form Submit', () => { + it('should validate form submission and success message', async () => { + // 1. Open URL and Click "Input Form Submit" + await browser.url('https://www.lambdatest.com/selenium-playground'); + const inputFormLink = await $('=Input Form Submit'); // Using link text selector + await inputFormLink.click(); + + const submitButton = await $('//button[text()="Submit"]'); // Using XPath for button text + + // 2. Click "Submit" without filling in any information + await submitButton.click(); + + // 3. Assert "Please fill out this field." error message. + // For HTML5 validation messages, direct `getText()` on a visible element is rare. + // You often check the `validationMessage` property via executeScript, + // or check for a specific error message element if one appears. + const nameField = await $('#name'); // Inspect to confirm ID + const validationMessage = await browser.execute(function(el) { + return el.validationMessage; + }, nameField); + await expect(validationMessage).toEqual('Please fill out this field.'); + console.log(`Initial validation message for Name field: '${validationMessage}' - Passed.`); + + // 4. Fill in Name, Email, and other fields. + await nameField.setValue('Jane Doe'); + await $('#inputEmail4').setValue('jane.doe@example.com'); // Inspect ID + await $('#inputPassword4').setValue('securepassword'); // Inspect ID + await $('#company').setValue('Acme Corp'); // Inspect ID + await $('#websitename').setValue('www.janedoe.org'); // Inspect ID + await $('#inputCity').setValue('Los Angeles'); // Inspect ID + await $('#inputAddress1').setValue('456 Oak Ave'); // Inspect ID + await $('#inputAddress2').setValue('Suite 101'); // Inspect ID + await $('#inputState').setValue('CA'); // Inspect ID + await $('#inputZip').setValue('90001'); // Inspect ID + + // 5. From the Country drop-down, select "United States" using the text property. + const countryDropdown = await $('[name="country"]'); // Inspect for name or ID + await countryDropdown.selectByVisibleText('United States'); + + // 6. Fill in all fields (done in steps 4 & 5) and click "Submit". + await submitButton.click(); + + // 7. Validate the success message "Thanks for contacting us, we will get back to you shortly." + // Wait for the success message to be visible + const successMessage = await $('.success-msg'); // Inspect this element for its class/ID/XPath + await successMessage.waitForDisplayed({ timeout: 5000 }); // Explicit wait for visibility + await expect(successMessage).toHaveText('Thanks for contacting us, we will get back to you shortly.'); + console.log(`Success message validated: '${await successMessage.getText()}'`); + }); +}); \ No newline at end of file