Better Kinetic Tracing

Mark or @spaceage you ever get any timeouts? Like it can’t actually follow the codegen?

Mine is getting hung up completing the script and timing out…

I haven’t, but I’ve really only tested logging in and running one of the apps we’re having customization issues with.

1 Like

It’s all good I created some records up to the point where I now want to trace, instead of code gen-ing everything up to that point haha.

@Mark_Wonsil @spaceage check this fun out… I can’t do a code gen on what I was hoping to do a codegen on because the name of the checkbox changes every time you click it?? So it’s impossible to re-trace???

Ooof…

1 Like

Well… back to tryign to get the dataview data from the dev tools console…

anyone know of a decent way to export that???

Turn on debug logging in the browser, dump the views (epDebug.dumpViews). That will console.log all of the views and their data. Open each view to view the console.table output. If you right-click anywhere inside the output table and select Copy Message, you can paste it into Excel and work from there.

Or if you know the view data you want, just use epDebug.dumpViewData([dataset name]) This outputs each array element individually instead of in a table.

1 Like

I updated the Epicor idea so @bconner knows. There may be another Locator we could use?

Page.GetByText for example. :thinking:

These are the kinds of things we’ll need to flush out. This is a common problem with all web testing frameworks.

2 Likes

I was super super exiceted for a moment, but now that I see what it does Mark, I can totally see how awesome this is.

Thanks Chris, I will try that. thanks a ton. I got the dataviews showing I just couldn’t figure out a good way to get it out of the console to be able to do a compare against another dataset.

But there’s no way to just export all those view tables into excel without opening both up?

Not that I’ve found.

Chris,

I found success with this:

To export data views/business object param datasets from Microsoft Edge DevTools, follow these steps:

  1. Open the Microsoft Edge DevTools by pressing F12 or Ctrl + Shift + I.
  2. Navigate to the Network tab. Make sure “Preseve Log” is checked.

    2b. Do whatever actions you want in the application, for example, in my case, click the received button on the receipt line and then click save…
  3. Select the Export button at the top of the tab.
  4. Choose the desired file format for export, such as HAR (HTTP Archive) or CSV (Comma Separated Values).
  5. Save the exported file to your desired location.

Then use HAR Analyzer (googleapps.com) to open the file you saved. Find the business object method that you want the payload for and click the gear/settings icon circled in blue in the photo below. Then go to the post data tab (seen in the second photo below). I wish it wasn’t an online tool and sharing the logs with google… maybe someone has an offline option we can use?

1 Like

Great find Utah! Thanks for sharing it.

Here’s an Open Source HAR Viewer you can fork and build yourself: GitHub - janodvarko/harviewer: HAR Viewer is a web application that allows visualizing HTTP Archive logs (HARs)

1 Like

Thanks Chris!

1 Like

Pretty sure the same HAR information is in the Playwright trace file too (trace.network). It may very well be in HAR format too.

Browser | Playwright

1 Like

You are right Mark! The hard part though like I showed you is that I couldn’t get it to perform the exact transactions I needed to make because of that checkbox indicator issue I demonstrated.

Understood. I think it’s possible though. The recorded Locator used the ID, which we see is not static (and I sent @bconner a note about it in the Epicor Idea), but if you changed it to the above locator, I think it will find it.

So yes, for one off traces, you can certainly do it by hand. But when you get to the day where you want to test your Kinetic customizations for each upgrade, then that puts you back in the position now where testing takes forever. Doing it by hand just doesn’t scale.

1 Like

Thanks Mark, I will try it again now and take a shot at understanding what you just said by “changed it to [Page.GetByText],” I don’t exactly know how to even do that! :sweat_smile:

The first thing that we need to know about web dev is that every web page is represented by the Document Object Model. Think of it as a tree structure where each node contains optional attributes and children elements. The DOM is able to find elements on the page for styling or actions. Playwright abstracts these methods into Locators.

In strict HTML, one and only one element should have a unique ID. When Playwright says, “Locator(”#EpCheckBox1023"), it should be able to find that element quickly. Now, if the ID is constantly changing, we see that as a problem since we can’t rely on it. If you went to your recorded code and change the Locator:

  await page.Locator("#Checkbox1023").ClickAsync();

to

  await page.getByRole('checkbox', { name: 'Received' }).check();

which finds the checkbox with the label “Received”. We could also use just the text, but if it appears more than one time, that would have to be handled to make sure you have the correct element.

Hope that makes sense. This is why I entered the Epicor Idea, so we could both improve the accessibility of Kinetic pages for screen readers, etc. and to aid in testing.

2 Likes