Can we use protractor for automating google blockly UI

[zope....@gmail.com]

Recently We have implemented Google blockly in our application. I need to automate the UI using protractor.

I am able to automate it to an extent but not able to find coordinates for the blocks. Please suggest a method which can be used for finding co-ordinates for these blocks.

[Andrew n marshall]

Hi Zope,

We haven't used Protractor.  In fact, we don't have any good UI level test framework.

I'm assuming you're doing this for testing, and you need document or viewport coordinates in CSS pixel units. If not please elaborate.

The coordinates in Blockly are complicated due a number of offsets and unit scaling factors. This thread may help.

If performance isn't a major consideration, getBoundingClientRect() might be sufficient:

    block.getSvgRoot().getBoundingClientRect();

Testing in Chrome, this seems to return the correct viewport coordinate, accounting for injection div offsets, and workspace pan/zoom. However, that bounding box is not entirely clickable. Output tabs and statement inputs may create non-rectangular blocks.

If that does not meet your needs, please let us know and elaborate on what your use case is. There a large number of properties and methods related to sizing and coordinates that might help.

We are very curious to see what you are doing with it, and if there is anything we can adapt to our own testing. Please keep us informed.

--
Andrew

On Wed, Apr 4, 2018 at 4:35 AM, <zope....@gmail.com> wrote:

Recently We have implemented Google blockly in our application. I need to automate the UI using protractor.

I am able to automate it to an extent but not able to find coordinates for the blocks. Please suggest a method which can be used for finding co-ordinates for these blocks.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[zope....@gmail.com]

We implemented blockly in our application..Now we need to do automation testing around blocky using selenium..So we were thinking around it that how can we automate the things around blockly..We are able to locate the elements but how we will connect the blocks together.(for that we might need co-ordinates for proper connection between blocks)

1. As we are doing Drag and drop with x and y co-ordinates(Using Selenium(Protractor Javascript)) But we are giving random x and y co ordinates for drop and cross checking the co-ordinates.So we are not getting any solution around it..

Please let us know how we can do testing around Blocky.(Is it Manual Testing only Or else If we can Do Automation Testing for it then How?)

--
Andrew

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

[Andrew n marshall]

Drag and drop interfaces, like blockly, are difficult to test with automation. In particular for Blockly, there are a number of coordinate systems are play, and a lot of consideration has to be given to visibility, occlusion, zoom/scale, etc. Further, the drag gesture has to emulate the events that are normally sent from the browser via user interaction to a high level of detail in order to ensure you are testing actual behavior (order of events, number of events, timing of events, not to mention browser differences). In the blockly team, we have focused on manual testing, because we know that is what the user will really see.  Obviously this doesn't scale, but the drag related changes from version to version are very small.

For your own efforts, since you didn't write the mouse and drag code (and presumably didn't modify that aspect of our code), I'm guess you're probably more interested in see what happens upon certain connections than for specific mouse input.  Have you consider writing your test code at higher level, manipulating the blocks, inputs, connections and fields? For example, test a configuration of blocks generates the code output you expect, or test a mutator or change handler correctly responds to a give field value.

All of these Blockly APIs are public, and we will be able to better support your efforts.

--
Andrew

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+unsubscribe@googlegroups.com.

[Andrew Stratton]

Maybe this will help - you can, in html, create blocks that are joined to each other without using coordinates.  Then maybe you could auto drag the combined blocks into the canvas and then test it ?! 

e.g. I have a (collapsed) block containing multiple other blocks - I used blockly to create the blocks, then collapsed the (outer) block, then displayed the Xml (that would be used to save the blocks).  I then pasted the Xml into the menu description:

<category name="Leap" id="quando_leap">

<block type="quando_Description" collapsed="true">

<field name="TEXT_INPUT_description_text">Leap Cursor ⇔⇕</field>

<statement name="STATEMENT">

<block type="quando_When Leap move">

<field name="MENU_INPUT_Variable">⇔</field>

<field name="EXTRAS_OPEN">...</field>

<field name="NUMBER_INPUT_plus minus">15</field>

<field name="CHECK_INPUT_Inverted">FALSE</field>

<statement name="STATEMENT">

<block type="quando_Change Cursor">

<field name="MENU_INPUT_Cursor menu">quando.cursor_left_right</field>

</block>

</statement>

<next>

<block type="quando_When Leap move">

<field name="MENU_INPUT_Variable">⇕</field>

<field name="EXTRAS_OPEN">...</field>

<field name="NUMBER_INPUT_plus minus">15</field>

<field name="CHECK_INPUT_Inverted">FALSE</field>

<statement name="STATEMENT">

<block type="quando_Change Cursor">

<field name="MENU_INPUT_Cursor menu">quando.cursor_up_down</field>

</block>

</statement>

</block>

</next>

</block>

</statement>

</block>

</category>

Sorry the example is so long... This may do what you want - you could use a server script to push the required html - this isn't a simple approach, but if you already have the knowledge, it should make sense...

Best wishes

  Andy

[Sreenivas T]

Hi Zope,

Hope you are doing good. We have implemented Lean FT automation framework for Web application with Google Blockly is part of it. We are able to easily implement Drag and drop of blocks using lean ft mouse actions/operations capabilities. I believe we have mouse actions in selenium web-driver also. For the next level to tag each block, my dev has enabled "collate" option to start block(on right-click menu) which helped us to tag all the blocks in the workspace easily for automation. My current application does not depend upon the flow of blocks and i can tag any block any place. Blockly itself has this "collate" option hidden which you can get enabled with the help of your Dev team.

Coming to my challenge i am able to hard-code for the few scenario's but unable to handle dynamically the checkbox's/ text field's/drop-down inside the blocks as i am not able to identify the blocks uniquely with Lean FT tool alone. I am researching on this issue and requested Andrew team to add id of the blocks which can be used to identify blocks uniquely. Even after updates in code google blockly API is not exposing the blockly id's at HTML side. which is not helping us to go forward with automation.

Can you please suggest or let me know how good and comfortably you are able to access blockly blocks with protractor tool ? If Yes, please let me know if you know can we integrate protractor with Lean FT.

Thanks,
Sreenivas

[Rachel Fenichel]

Hi Sreenivas,

Block IDs are exposed in the data-id attribute of each block's SVG root.  That's currently in the master branch and live in our demos.

Rachel

[HD]

On Wednesday, 4 April 2018 17:05:41 UTC+5:30, zope....@gmail.com wrote:
> Recently We have implemented Google blockly in our application. I need to automate the UI using protractor.
> I am able to automate it to an extent but not able to find coordinates for the blocks. Please suggest a method which can be used for finding co-ordinates for these blocks.

Hi zope,
We are also trying to figure out automation for blockly ui
Can you share your experience.