I am trying to create a test that will allow me to manipulate a SFGrid control. I have done this before in Selenium but it was complex and when I tried to manipulate the gird, Managing state was an issue.
I was hoping that playwrite with it's locators will allow me to identify a particular grid, and then perform actions, and verify the behaviour.
Each tab in a SFTab could contain 1 or more grids.
<SfTab>
<TabAnimationSettings>
<TabAnimationPrevious Effect=AnimationEffect.None></TabAnimationPrevious>
<TabAnimationNext Effect=AnimationEffect.None></TabAnimationNext>
</TabAnimationSettings>
<TabItems>
<TabItem>
<ChildContent>
<TabHeader Text="Maintain List of Courses"></TabHeader>
</ChildContent>
<ContentTemplate>
<CourseList />
</ContentTemplate>
</TabItem>
<TabItem>
<ChildContent>
<TabHeader Text="Maintain Course Details"></TabHeader>
</ChildContent>
<ContentTemplate>
<CourseDetails />
</ContentTemplate>
</TabItem>
The particular control I am trying to create a base example of is the component
[<SfGrid @ref=CourseGrid DataSource="@availableCourses"
AllowPaging=true
Toolbar="@(new List<string>() {"Add", "Edit"})">
<GridEvents OnActionBegin="OnActionBegin"
TValue="CourseData"></GridEvents>
<GridEditSettings AllowAdding=true AllowEditing=true>
</GridEditSettings>
<GridColumns>
<GridColumn IsPrimaryKey=true AllowAdding=false AllowEditing=false
Field="Key" HeaderText="Key" Width="100"> </GridColumn>
<GridColumn Field="Title" HeaderText="Chapter Title" TextAlign=TextAlign.Left
</GridColumn>
</GridColumns>
</SfGrid>]
What I need to be able to do is navigate to the controls or headers or data without knowing what the expected content is.
When I use the playwrite inspector I get locators like these
await Page.Locator("#sfgridxhaqtb0qdom_toolbarItems").ClickAsync();
await Page.GetByRole(AriaRole.Button, new() { Name = "Add" }).ClickAsync();
await Page.GetByRole(AriaRole.Gridcell, new() { Name = "ISTQB Foundation Column Header Chapter Title" }).ClickAsync();
await Page.Locator("div").Filter(new() { HasTextRegex = new Regex("^Chapter Title$") }).ClickAsync();
When I try to chain locators I just endup with timeouts.
