public async Task ShouldWorkWithAMobileViewportAndClip()
{
await using var context = await Browser.NewContextAsync(new BrowserContextOptions
{
Viewport = new ViewportSize
{
Width = 320,
Height = 480,
},
IsMobile = true,
});
var page = await context.NewPageAsync();
await page.GoToAsync(TestConstants.ServerUrl + "/overflow.html");
byte[] screenshot = await page.ScreenshotAsync(
new Rect
{
X = 10,
Y = 10,
Width = 100,
Height = 150
});
Assert.True(ScreenshotHelper.PixelMatch("screenshot-mobile-clip.png", screenshot));
}
public async Task ShouldCaptureFullElementWhenLargerThanViewportInParallel()
{
await Page.SetViewportSizeAsync(new ViewportSize
{
Width = 500,
Height = 500
});
await Page.SetContentAsync(@"
<div style=""height: 14px"">oooo</div>
<style>
div.to-screenshot {
border: 1px solid blue;
width: 600px;
height: 600px;
margin-left: 50px;
}
::-webkit-scrollbar{
display: none;
}
</style>
<div class=""to-screenshot""></div>
<div class=""to-screenshot""></div>
<div class=""to-screenshot""></div>
");
var elementHandles = await Page.QuerySelectorAllAsync("div.to-screenshot");
var screenshotTasks = elementHandles.Select(e => e.ScreenshotAsync()).ToArray();
await TaskUtils.WhenAll(screenshotTasks);
Assert.True(ScreenshotHelper.PixelMatch("screenshot-element-larger-than-viewport.png", screenshotTasks.ElementAt(2).Result));
}
public async Task ShouldRunInParallel()
{
await Page.SetViewportSizeAsync(new ViewportSize
{
Width = 500,
Height = 500
});
await Page.GoToAsync(TestConstants.ServerUrl + "/grid.html");
var tasks = new List <Task <byte[]> >();
for (int i = 0; i < 3; ++i)
{
tasks.Add(Page.ScreenshotAsync(
new Rect
{
X = 50 * i,
Y = 0,
Width = 50,
Height = 50
}));
}
await TaskUtils.WhenAll(tasks);
Assert.True(ScreenshotHelper.PixelMatch("grid-cell-1.png", tasks[0].Result));
}
public async Task ShouldTakeIntoAccountPaddingAndBorder()
{
await Page.SetViewportSizeAsync(new ViewportSize
{
Width = 500,
Height = 500
});
await Page.SetContentAsync(@"
<div style=""height: 14px"">oooo</div>
<style>div {
border: 2px solid blue;
background: green;
width: 50px;
height: 50px;
}
</style>
<div id=""d""></div>");
var elementHandle = await Page.QuerySelectorAsync("div#d");
byte[] screenshot = await elementHandle.ScreenshotAsync();
Assert.True(ScreenshotHelper.PixelMatch("screenshot-element-padding-border.png", screenshot));
}
public async Task ShouldScroll15000pxIntoView()
{
await Page.SetViewportSizeAsync(500, 500);
await Page.SetContentAsync(@"
<div style=""height: 14px"">oooo</div>
<style>div.above {
border: 2px solid blue;
background: red;
height: 15000px;
}
div.to-screenshot {
border: 2px solid blue;
background: green;
width: 50px;
height: 50px;
}
</style>
<div class=""above""></div>
<div class=""to-screenshot""></div>");
var elementHandle = await Page.QuerySelectorAsync("div.to-screenshot");
byte[] screenshot = await elementHandle.ScreenshotAsync();
Assert.True(ScreenshotHelper.PixelMatch("screenshot-element-scrolled-into-view.png", screenshot));
}
public async Task ShouldCaptureFullElementWhenLargerThanViewport()
{
await Page.SetViewportSizeAsync(new ViewportSize
{
Width = 500,
Height = 500
});
await Page.SetContentAsync(@"
<div style=""height: 14px"">oooo</div>
<style>
div.to-screenshot {
border: 1px solid blue;
width: 600px;
height: 600px;
margin-left: 50px;
}
::-webkit-scrollbar{
display: none;
}
</style>
<div class=""to-screenshot""></div>
<div class=""to-screenshot""></div>
<div class=""to-screenshot""></div>");
var elementHandle = await Page.QuerySelectorAsync("div.to-screenshot");
byte[] screenshot = await elementHandle.ScreenshotAsync();
Assert.True(ScreenshotHelper.PixelMatch("screenshot-element-larger-than-viewport.png", screenshot));
await TestUtils.VerifyViewportAsync(Page, 500, 500);
}
public async Task ShouldWorkForAnElementWithAnOffset()
{
await Page.SetContentAsync("<div style=\"position:absolute; top: 10.3px; left: 20.4px;width:50.3px;height:20.2px;border:1px solid black;\"></div>");
var elementHandle = await Page.QuerySelectorAsync("div");
byte[] screenshot = await elementHandle.ScreenshotAsync();
Assert.True(ScreenshotHelper.PixelMatch("screenshot-element-fractional-offset.png", screenshot));
}
public async Task ShouldWorkForAnElementWithFractionalDimensions()
{
await Page.SetContentAsync("<div style=\"width:48.51px;height:19.8px;border:1px solid black;\"></div>");
var elementHandle = await Page.QuerySelectorAsync("div");
byte[] screenshot = await elementHandle.ScreenshotAsync();
Assert.True(ScreenshotHelper.PixelMatch("screenshot-element-fractional.png", screenshot));
}
public async Task ShouldRenderWhiteBackgroundOnJpegFile()
{
await Page.SetViewportSizeAsync(new ViewportSize { Width = 100, Height = 100 });
await Page.GoToAsync(TestConstants.EmptyPage);
byte[] screenshot = await Page.ScreenshotAsync(
omitBackground : true,
type : ScreenshotFormat.Jpeg);
Assert.True(ScreenshotHelper.PixelMatch("white.jpg", screenshot));
}
public async Task PathOptionShouldDetectJpeg()
{
await Page.SetViewportSizeAsync(100, 100);
await Page.GoToAsync(TestConstants.EmptyPage);
using var tmpDir = new TempDirectory();
string outputPath = Path.Combine(tmpDir.Path, "screenshot.jpg");
await Page.ScreenshotAsync(outputPath, omitBackground : true);
Assert.True(ScreenshotHelper.PixelMatch("white.jpg", outputPath));
}
public async Task PathOptionShouldCreateSubdirectories()
{
await Page.SetViewportSizeAsync(500, 500);
await Page.GoToAsync(TestConstants.ServerUrl + "/grid.html");
using var tmpDir = new TempDirectory();
string outputPath = Path.Combine(tmpDir.Path, "these", "are", "directories", "screenshot.png");
await Page.ScreenshotAsync(outputPath);
Assert.True(ScreenshotHelper.PixelMatch("screenshot-sanity.png", outputPath));
}
public async Task ShouldWorkWithOddClipSizeOnRetinaDisplays()
{
byte[] screenshot = await Page.ScreenshotAsync(
new Rect
{
X = 0,
Y = 0,
Width = 11,
Height = 11
});
Assert.True(ScreenshotHelper.PixelMatch("screenshot-clip-odd-size.png", screenshot));
}
public async Task ShouldRunInParallelInMultiplePages()
{
int n = 5;
var pageTasks = new List <Task <IPage> >();
for (int i = 0; i < n; i++)
{
async Task <IPage> Func()
{
var page = await Context.NewPageAsync();
await page.GoToAsync(TestConstants.ServerUrl + "/grid.html");
return(page);
}
pageTasks.Add(Func());
}
await TaskUtils.WhenAll(pageTasks);
var screenshotTasks = new List <Task <byte[]> >();
for (int i = 0; i < n; i++)
{
screenshotTasks.Add(pageTasks[i].Result.ScreenshotAsync(
new Rect
{
X = 50 * (i % 2),
Y = 0,
Width = 50,
Height = 50
}));
}
await TaskUtils.WhenAll(screenshotTasks);
for (int i = 0; i < n; i++)
{
Assert.True(ScreenshotHelper.PixelMatch($"grid-cell-{i % 2}.png", screenshotTasks[i].Result));
}
var closeTasks = new List <Task>();
for (int i = 0; i < n; i++)
{
closeTasks.Add(pageTasks[i].Result.CloseAsync());
}
await TaskUtils.WhenAll(closeTasks);
}
public async Task ShouldTakeFullPageScreenshots()
{
await Page.SetViewportSizeAsync(new ViewportSize
{
Width = 500,
Height = 500
});
await Page.GoToAsync(TestConstants.ServerUrl + "/grid.html");
byte[] screenshot = await Page.ScreenshotAsync(true);
Assert.True(ScreenshotHelper.PixelMatch("screenshot-grid-fullpage.png", screenshot));
}
public async Task ShouldWorkForWebgl()
{
await Page.SetViewportSizeAsync(new ViewportSize
{
Width = 640,
Height = 480
});
await Page.GoToAsync(TestConstants.ServerUrl + "/screenshots/webgl.html");
byte[] screenshot = await Page.ScreenshotAsync();
Assert.True(ScreenshotHelper.PixelMatch("screenshot-webgl.png", screenshot));
}
public async Task ShouldWorkForTranslateZ()
{
await Page.SetViewportSizeAsync(new ViewportSize
{
Width = 500,
Height = 500
});
await Page.GoToAsync(TestConstants.ServerUrl + "/screenshots/translateZ.html");
byte[] screenshot = await Page.ScreenshotAsync();
Assert.True(ScreenshotHelper.PixelMatch("screenshot-translateZ.png", screenshot));
}
public async Task ShouldAllowTransparency()
{
await Page.SetViewportSizeAsync(new ViewportSize
{
Width = 50,
Height = 150
});
await Page.GoToAsync(TestConstants.EmptyPage);
byte[] screenshot = await Page.ScreenshotAsync(omitBackground : true);
Assert.True(ScreenshotHelper.PixelMatch("transparent.png", screenshot));
}
public async Task PathOptionShouldCreateSubdirectories()
{
await Page.SetViewportSizeAsync(500, 500);
await Page.GoToAsync(TestConstants.ServerUrl + "/grid.html");
await Page.EvaluateAsync("() => window.scrollBy(50, 100)");
var elementHandle = await Page.QuerySelectorAsync(".box:nth-of-type(3)");
using var tmpDir = new TempDirectory();
string outputPath = Path.Combine(tmpDir.Path, "these", "are", "directories", "screenshot.png");
await elementHandle.ScreenshotAsync(outputPath);
Assert.True(ScreenshotHelper.PixelMatch("screenshot-element-bounding-box.png", outputPath));
}
public async Task ShouldClipElementsToTheViewport()
{
await Page.SetViewportSizeAsync(new ViewportSize { Width = 500, Height = 500 });
await Page.GoToAsync(TestConstants.ServerUrl + "/grid.html");
byte[] screenshot = await Page.ScreenshotAsync(
new Rect
{
X = 50,
Y = 450,
Width = 1000,
Height = 100,
});
Assert.True(ScreenshotHelper.PixelMatch("screenshot-offscreen-clip.png", screenshot));
}
public async Task ShouldWork()
{
await Page.SetViewportSizeAsync(new ViewportSize
{
Width = 500,
Height = 500
});
await Page.GoToAsync(TestConstants.ServerUrl + "/grid.html");
await Page.EvaluateAsync("window.scrollBy(50, 100)");
var elementHandle = await Page.QuerySelectorAsync(".box:nth-of-type(3)");
byte[] screenshot = await elementHandle.ScreenshotAsync();
Assert.True(ScreenshotHelper.PixelMatch("screenshot-element-bounding-box.png", screenshot));
}
public async Task ShouldWorkWithiFrameInShadow()
{
await using var context = await Browser.NewContextAsync(new BrowserContextOptions
{
Viewport = new ViewportSize
{
Width = 500,
Height = 500,
},
});
var page = await context.NewPageAsync();
await page.GoToAsync(TestConstants.ServerUrl + "/grid-iframe-in-shadow.html");
byte[] screenshot = await page.ScreenshotAsync();
Assert.True(ScreenshotHelper.PixelMatch("screenshot-iframe.png", screenshot));
}
public async Task ShouldClipRectWithFullPage()
{
await Page.SetViewportSizeAsync(new ViewportSize { Width = 500, Height = 500 });
await Page.GoToAsync(TestConstants.ServerUrl + "/grid.html");
await Page.EvaluateAsync("() => window.scrollBy(150, 200)");
byte[] screenshot = await Page.ScreenshotAsync(
fullPage : true,
clip : new Rect
{
X = 50,
Y = 100,
Width = 150,
Height = 100,
});
Assert.True(ScreenshotHelper.PixelMatch("screenshot-clip-rect.png", screenshot));
}
public async Task ShouldWorkWithDeviceScaleFactor()
{
await using var context = await Browser.NewContextAsync(new BrowserContextOptions
{
Viewport = new ViewportSize
{
Width = 320,
Height = 480,
},
DeviceScaleFactor = 2,
});
var page = await context.NewPageAsync();
await page.GoToAsync(TestConstants.ServerUrl + "/grid.html");
byte[] screenshot = await page.ScreenshotAsync();
Assert.True(ScreenshotHelper.PixelMatch("screenshot-device-scale-factor.png", screenshot));
}
public async Task ShouldWorkWithFilePath()
{
await Page.RouteAsync("**/*", (route, request) =>
{
route.FulfillAsync(
contentType: "shouldBeIgnored",
path: TestUtils.GetWebServerFile("pptr.png"));
});
await Page.EvaluateAsync(@"PREFIX => {
const img = document.createElement('img');
img.src = PREFIX + '/does-not-exist.png';
document.body.appendChild(img);
return new Promise(fulfill => img.onload = fulfill);
}", TestConstants.ServerUrl);
var img = await Page.QuerySelectorAsync("img");
Assert.True(ScreenshotHelper.PixelMatch("mock-binary-response.png", await img.ScreenshotAsync()));
}
public async Task ShouldAllowMockingBinaryResponses()
{
await Page.RouteAsync("**/*", (route, request) =>
{
byte[] imageBuffer = File.ReadAllBytes(TestUtils.GetWebServerFile("pptr.png"));
route.FulfillAsync(
contentType: "image/png",
bodyContent: imageBuffer);
});
await Page.EvaluateAsync(@"PREFIX => {
const img = document.createElement('img');
img.src = PREFIX + '/does-not-exist.png';
document.body.appendChild(img);
return new Promise(fulfill => img.onload = fulfill);
}", TestConstants.ServerUrl);
var img = await Page.QuerySelectorAsync("img");
Assert.True(ScreenshotHelper.PixelMatch("mock-binary-response.png", await img.ScreenshotAsync()));
}
public async Task ShouldWorkWithARotatedElement()
{
await Page.SetViewportSizeAsync(new ViewportSize
{
Width = 500,
Height = 500
});
await Page.SetContentAsync(@"
<div style='position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background: green;
transform: rotateZ(200deg); '> </div>
");
var elementHandle = await Page.QuerySelectorAsync("div");
byte[] screenshot = await elementHandle.ScreenshotAsync();
Assert.True(ScreenshotHelper.PixelMatch("screenshot-element-rotate.png", screenshot));
}
public async Task ShouldWaitForVisible()
{
await Page.SetViewportSizeAsync(500, 500);
await Page.GoToAsync(TestConstants.ServerUrl + "/grid.html");
await Page.EvaluateAsync("() => window.scrollBy(50, 100)");
var elementHandle = await Page.QuerySelectorAsync(".box:nth-of-type(3)");
await elementHandle.EvaluateAsync("e => e.style.visibility = 'hidden'");
var task = elementHandle.ScreenshotAsync();
for (int i = 0; i < 10; i++)
{
await Page.EvaluateAsync("() => new Promise(f => requestAnimationFrame(f))");
}
Assert.False(task.IsCompleted);
await elementHandle.EvaluateAsync("e => e.style.visibility = 'visible'");
byte[] screenshot = await task;
Assert.True(ScreenshotHelper.PixelMatch("screenshot-element-bounding-box.png", screenshot));
}
public async Task ShouldWorkWithDeviceScaleFactor()
{
await using var context = await Browser.NewContextAsync(new BrowserContextOptions
{
Viewport = new ViewportSize
{
Width = 320,
Height = 480,
},
DeviceScaleFactor = 2,
});
var page = await context.NewPageAsync();
await page.GoToAsync(TestConstants.ServerUrl + "/grid.html");
await page.EvaluateAsync("() => window.scrollBy(50, 100)");
var elementHandle = await page.QuerySelectorAsync(".box:nth-of-type(3)");
byte[] screenshot = await elementHandle.ScreenshotAsync();
Assert.True(ScreenshotHelper.PixelMatch("screenshot-element-mobile-dsf.png", screenshot));
}
