![\"\"](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/03\/How-to-Use-Playwright-Inspector-for-Faster-Test-Debugging-in-Dynamics-365-CRM.png\")
<\/p>\n<\/p>\n
Automation testing requires interacting with different UI elements in an application. Tests may fail for several reasons such as incorrect selectors, synchronization issues, or unexpected changes in the UI. Identifying reliable UI selectors is therefore crucial when writing complex automation scripts. One of the most common causes of UI automation failures is the use of incorrect or unstable selectors.<\/p>\n
Some common reasons why automation scripts fail include:<\/p>\n
Debugging tools such as the Playwright Inspector allow to pause test execution and visually inspect the web page during test runs. This makes it easier to identify locator issues and understand how the test interacts with the application.<\/p>\n
The Playwright Inspector works as a debugging interface that opens when Playwright tests are executed in debug mode. It provides several useful capabilities:<\/p>\n
Because Playwright interacts with a real browser, it allows to observe actual browser behavior. This helps in verifying that the application performs as expected during automation. With the Inspector, you can:<\/p>\n
In previous blog<\/a> we have already explored how Playwright can be used for Dynamics 365 automation testing wherein we have simply created contact record using Typescript code.<\/p>\n Let\u2019s extend the same use case. While creating a Contact record in Dynamics 365 CRM<\/strong>, we will now work with more complex UI elements such as lookup fields and option set fields. At the same time, we will use the Playwright Inspector for live debugging.<\/p>\n To perform the debugging process you can add a\u00a0page.pause()<\/a>\u00a0method to your test. This way you will see the GUI page appears for \u201cPlaywright Inspector\u201d while running the test.<\/p>\n By following the same steps provided in previous blog you can complete the Playwright setup (if not already) and here is the upgraded version of typescript code with more complex selectors and debugging step.<\/p>\n Create tests\/contact.spec.ts:<\/p>\n Note:<\/strong> You can refer below code await page.pause ()<\/strong> is added explicitly.<\/p>\n Run the above typescript file using below command<\/p>\n npx playwright test contact.spec.ts –headed<\/p>\n As you have add a\u00a0page.pause()\u00a0it run your tests in debug mode. You can play, pause or step through each action of your test using the toolbar at the top of the Inspector.<\/p>\n You can click on \u201cRecord\u201d button and \u201cStart Recording\u201d the other web element with user interactions corresponding typescript code will be recorded\/generated in background through recording feature. Using Playwright Inspector makes debugging UI automation much easier by allowing inspect elements and execute tests step by step. This helps identify unstable selectors and improves the reliability of automation scripts. This leads to more stable tests and a smoother automation development process.<\/p>\n What are the common causes of UI automation test failures in Microsoft Dynamics 365?<\/strong><\/p>\n UI automation tests in Microsoft Dynamics 365 commonly fail due to:<\/p>\n What is UI automation testing in Microsoft Dynamics 365 CRM?<\/strong><\/p>\n UI automation testing in Microsoft Dynamics 365<\/strong> involves simulating user interactions (like form entry, navigation, and record creation) to validate that the CRM application behaves correctly. Tools like Playwright<\/strong> help automate these workflows efficiently.<\/p>\n How does Playwright help with Dynamics 365 automation testing?<\/strong><\/p>\n Playwright enables:<\/p>\n This makes it highly effective for automating complex Dynamics 365 applications.<\/p>\n Is it possible to automate end-to-end workflows in Microsoft Dynamics 365 using Playwright?<\/strong><\/p>\n Yes, Playwright supports full end-to-end automation in Dynamics 365, including navigation, form submissions, lookups, and validations. With proper waits and selectors, entire business workflows can be reliably automated.<\/p>\n How can you verify form submission in Dynamics 365 automation?<\/strong><\/p>\n Form submission can be verified by checking confirmation messages, updated field values, or successful navigation. Assertions ensure that the action has completed as expected.<\/p>\n How do you handle timing issues in Dynamics 365 automation?<\/strong><\/p>\n Timing issues are handled using Playwright\u2019s auto-waiting along with explicit waits like waitFor() and assertions. This ensures elements are fully loaded and ready before interaction, reducing test failures.<\/p>\n What is the advantage of using role-based selectors in Playwright?<\/strong><\/p>\n Role-based selectors improve reliability by targeting elements based on accessibility roles rather than structure. This makes tests more stable, especially in dynamic applications like Dynamics 365.<\/p>\n","protected":false},"excerpt":{"rendered":" Automation testing requires interacting with different UI elements in an application. Tests may fail for several reasons such as incorrect selectors, synchronization issues, or unexpected changes in the UI. Identifying reliable UI selectors is therefore crucial when writing complex automation scripts. One of the most common causes of UI automation failures is the use of\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[3331,2361],"tags":[],"class_list":["post-44150","post","type-post","status-publish","format-standard","hentry","category-playwright-inspector","category-technical"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/44150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=44150"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/44150\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=44150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=44150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=44150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Using TypeScript with Complex Selectors:<\/strong><\/h3>\n
Typescript:<\/strong><\/h3>\n
import { test, expect, Page } from '@playwright\/test';\r\n\r\nimport { populate } from 'dotenv';\r\n\r\nimport fs from 'fs';\r\n\r\nimport path from 'path';\r\n\r\n\u00a0\r\n\r\n\/\/ --- AUTOMATIC VIDEO SAVER (FIXED) ---\r\n\r\ntest.afterEach(async ({ page }, testInfo) => {\r\n\r\nconst video = page.video(); \/\/ get video BEFORE closing\r\n\r\nawait page.close();\r\n\r\n\u00a0\r\n\r\nif (video) {\r\n\r\nconst videoPath = await video.path();\r\n\r\nconst timestamp = new Date().toISOString().replace(\/[:.]\/g, '-');\r\n\r\nconst newName = `${testInfo.title.replace(\/\\s+\/g, '_')}_${timestamp}.webm`;\r\n\r\nconst historyFolder = 'video-history';\r\n\r\n\u00a0\r\n\r\nif (!fs.existsSync(historyFolder)) {\r\n\r\nfs.mkdirSync(historyFolder);\r\n\r\n}\r\n\r\n\u00a0\r\n\r\nconst newPath = path.join(historyFolder, newName);\r\n\r\nawait fs.promises.copyFile(videoPath, newPath);\r\n\r\n\u00a0\r\n\r\nconsole.log(`✅ Video saved to: ${newPath}`);\r\n\r\n}\r\n\r\n});\r\n\r\n\u00a0\r\n\r\ntest('Create New Contact in D365', async ({ page }) => {\r\n\r\n\/\/ Debugging step\r\n\r\nawait page.pause()\r\n\r\ntest.setTimeout(120000);\r\n\r\n\u00a0\r\n\r\nconst appId = process.env.APP_ID!;\r\n\r\nconst orgUrl = process.env.CRM_URL!;\r\n\r\n\u00a0\r\n\r\n\/\/ 1. Navigate directly to Contacts grid, pause command use for debugging\r\n\r\n\u00a0\r\n\r\nawait page.goto(`${orgUrl}\/main.aspx?appid=${appId}&pagetype=entitylist&etn=contact`);\r\n\r\nawait page.waitForLoadState('domcontentloaded');\r\n\r\n\u00a0\r\n\r\n\/\/ 2. Click New (robust selector)\r\n\r\nconst newButton = page.locator(\"(\/\/span[contains(.,'New')])[1]\");\r\n\r\nawait expect(newButton).toBeVisible({ timeout: 30000 });\r\n\r\nawait newButton.click();\r\n\r\n\u00a0\r\n\r\n\/\/ 3. Wait for form to load (First Name field)\r\n\r\nconst firstName = page.locator('[data-id*=\"firstname\"] input');\r\n\r\nawait expect(firstName).toBeVisible({ timeout: 30000 });\r\n\r\n\u00a0\r\n\r\n\/\/ 4. Fill mandatory fields\r\n\r\nawait firstName.fill('Test');\r\n\r\nawait page.locator('[data-id*=\"lastname\"] input').fill('Bot');\r\n\r\nawait page.locator('[data-id*=\"jobtitle\"] input').fill('Dev');\r\n\r\nawait page\r\n\r\n.locator('[data-id*=\"emailaddress1\"] input')\r\n\r\n.fill('auto34@example.com');\r\n\r\n\u00a0\r\n\r\nconst parentAccountInput = page.locator('[data-id*=\"parentcustomerid\"] input');\r\n\r\n\u00a0\r\n\r\n\/\/ A. Click the field to activate it\r\n\r\nawait parentAccountInput.click();\r\n\r\n\u00a0\r\n\r\n\/\/ B. Type the search value\r\n\r\nawait parentAccountInput.fill('test');\r\n\r\n\u00a0\r\n\r\n\/\/ C. Wait for the dropdown results to appear and click the correct one\r\n\r\n\/\/ We look for a list item (role=option or li) containing the text 'test'\r\n\r\nconst lookupResult = page.getByRole('option', { name: \/test\/i }).first();\r\n\r\n\u00a0\r\n\r\n\/\/ Ensure the result is actually visible before clicking to avoid flakes\r\n\r\nconst resultList = page.locator('ul[aria-label*=\"Lookup results\"]');\r\n\r\nawait resultList.waitFor({ state: 'visible', timeout: 10000 });\r\n\r\n\u00a0\r\n\r\n\/\/ 4. Select the item from within that list\r\n\r\n\/\/ We use locator('li') to match the list item specifically, ensuring we don't click other UI elements\r\n\r\nconst correctOption = resultList.locator('li').filter({ hasText: \/test\/i }).first();\r\n\r\n\u00a0\r\n\r\nawait correctOption.waitFor({ state: 'visible', timeout: 5000 });\r\n\r\nawait correctOption.click();\r\n\r\n\u00a0\r\n\r\n\/\/ 5. Validation (Optional but recommended)\r\n\r\n\/\/ Ensure the input field now contains the text (meaning selection stuck)\r\n\r\n\/\/await expect(parentAccountInput).toHaveValue(\/test\/i);\r\n\r\n\u00a0\r\n\r\n\/\/ --- PREFERRED METHOD OF CONTACT FIX ---\r\n\r\n\u00a0\r\n\r\n\/\/ 1. Target the wrapper, NOT the input (which is invisible)\r\n\r\n\/\/ We use .first() just in case the selector matches the label and the field\r\n\r\nconst contactMethodDropdown = page.locator('[data-id*=\"preferredcontactmethodcode\"]').first();\r\n\r\n\u00a0\r\n\r\n\/\/ 2. Wait for the wrapper to be visible\r\n\r\nawait contactMethodDropdown.waitFor({ state: 'visible', timeout: 10000 });\r\n\r\n\u00a0\r\n\r\n\/\/ 3. Click to expand the list\r\n\r\nawait contactMethodDropdown.click();\r\n\r\n\u00a0\r\n\r\n\/\/ 4. Select 'Email' from the expanded list\r\n\r\nconst emailOption = page.getByRole('option', { name: 'Email' });\r\n\r\n\u00a0\r\n\r\n\/\/ Wait for the dropdown animation\r\n\r\nawait emailOption.waitFor({ state: 'visible', timeout: 5000 });\r\n\r\nawait emailOption.click();\r\n\r\n\u00a0\r\n\r\n\/\/ 5. Save (button role, not menuitem)\r\n\r\nconst saveButton = page.locator(\"(\/\/span[contains(.,'Save')])[1]\");\r\n\r\nawait expect(saveButton).toBeVisible({ timeout: 30000 });\r\n\r\nawait saveButton.click();\r\n\r\n\u00a0\r\n\r\n});<\/pre>\nRun the test:<\/strong><\/h3>\n
Step Over:<\/strong><\/h3>\n
Clicking the “Step Over” button in the Playwright Inspector will run the test step by step and will show a LIVE execution on browser as shown:
![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/03\/Playwright-Inspector-1.jpg\")
You can see the current action highlighted in the test code, and matching elements highlighted in the browser window.![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/03\/Playwright-Inspector-2.jpg\")
Pick Locator<\/strong>:<\/h3>\nWhile debugging, you might need to choose a more resilient locator. You can do this by clicking on the\u00a0Pick Locator\u00a0button and hovering over any element in the browser window. While hovering over an element you will see the code needed to locate this element highlighted below which then you can copy it into your code.
![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/03\/Playwright-Inspector-3.jpg\")
Record feature:<\/strong><\/h3>\n![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/03\/Playwright-Inspector-4.jpg\")
When started recording you will be able to locate the element start filling in data and can view generated code.![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/03\/Playwright-Inspector-5.jpg\")
The new Playwright Inspector window opens up where the recording code can be viewed and can be copied in the existing code.![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/03\/Playwright-Inspector-6.jpg\")
You can explore more about Playwright locators here<\/a> and may need to tweak little bit in recorded script and start using the same in existing code.<\/p>\nConclusion<\/strong>:<\/h3>\n
FAQs<\/strong><\/h3>\n
\n
\nUsing reliable locators and proper wait strategies helps reduce failures.<\/li>\n<\/ul>\n\n